Bulletproof Pixels

Home About Pricing Contact Little HowTos

Little HowTos

The Five Chakras of User Experience Design

The user experience is the degree of value that a user gains from interaction with your website. A "good" experience typically results in a product or service purchased and repeated business with the user (retention). A "bad" experience typically results in no business interaction and even possibly a degradation of the company's reputation.

  1. You have a business, now you need a website. The first question before beginning the design of your business' most important marketing platform is - just who is your user?

    The First Chakra: The User

    Identify who your users are and what the primary focus of their goals might be. Are they going to visit your site to purchase a product or service? Will their goal be to consume information? Perhaps they seek to meet new people who share an interest in what your business is all about.

    Also identify what creates a good experience for the user - what is appealing to them, not you. Building a site that is beautiful and artistic is a waste of time and money if your typical user prefers the quick completion of a task.

    Identifying the goals and expectations of a typical user of your website is typically referred to as a persona - an archetypal user for whom the product or service is being designed.

  2. A user opens (loads) a page of your site in their browser. What is their first impression? Here you get only one stab at a good first impression.

    The Second Chakra: The Interface (UI) User Interface

    • Visual design - Minimal, simple and uncluttered. Maintain consistency within the page and across the entire site. The visual design establishes your Brand Identity.
    • Page layout - Logically structured content. Group "like with like". Employ visual hierarchy; In Gestalt psychology, the world is chaotic by nature. Your goal in visual hierarchy should be to bring visual and structural order to the page.

      Ensure that the most important content remains "above the fold" on any device - desktop, laptop, tablets and mobile. This requires employing good responsive design and behaviors - in and of itself a large challenge.

      Your page structures across your site should reflect their own intuitive hierarchy. Your homepage might employ a "hero" image while top level "lead in" pages should be structured logically to their purpose - to introduce a product or service - while a specific product page layout should focus on just that - that particular item of interest.

    • Color scheme - Communicate purpose and branding identity through the intelligent use of color theory.
    • Typography - Fonts that compliment the overall design and are part of your brand identity, that are easy to read.
    • Positive negative space - Not an oxymoron but use of ample space around elements that help the eyes remain relaxed but not so much space that it requires a concerted effort to find what you are looking for.
    • Clear iconographic communication - Fewer details communicated through written text. Pictures are indeed worth a thousand words, especially in the modern world of "mobile".
    • Obvious calls to action - Buttons, banners or links that facilitate a speedy route to fulfill the user's reason for the visit based on either the assumed goal of your created persona or a marketing push based on a sale or the season.
    • An intuitive and easy to learn interface - "Don't make me think!" {friction over flow}
  3. If the user likes their initial impression of what they are looking at (a good first impression), they make a decision to look for what they are interested in finding on your site (information, a product or service). They begin to interact with the page.

    The Third Chakra: The Structure (IA) Information Architecture

    • Organization of information - The information on your homepage should be different than the information provided on "lead-in" top level pages, which in turn should be different from the information on the "goal page" - the page with the product or service description, price, etc. and a "begging" call to action (CTA).
    • Organization of hierarchies & categorical references - Most notably in the area of organizing the content on a website are the top level navigational groups, such as "About Us" and "Contact Us" and "Product Catalog" etc. Studies have shown that a main navigation "bar" should have no more that seven elements. In my opinion and experience, I would tend to achieve no more than five.

      Looking to the persona, ask yourself what your typical user might tend to seek first when coming to any page on your site. Your main navigational element should get them started on that path quickly, no matter what page they might enter into your site from a search engine or external link.

      The trend today, which has become more of a pattern than a trend (patterns survive the test of time over trends) has logically been to put "general" "main" navigational links in the footer, pages like "about" and "contact", preserving that precious real estate of your primary navigation "bar" toward the top of the page for those CTAs that are most important to your business goals.

    • Concise navigation - How many clicks does it take? {friction over flow} After the top level navigational elements are in place, how best to organize sub-navigation? This is wholly dependent on your business. Your main navigation might take the user to a "lead in" page that introduces a particular category of product or service you offer. Within that category you might have fifty or just two specific items under that category. Do these require further sub-categorization and possible "sub-lead in" pages (with larger quantities of offerings) or is it logical to have a brief introduction for each product or service (in the case of fewer offerings) with a clear CTA to take the user to the detailed product page with the exacting marketing to foster a purchase?

      In considering how to set up overall navigation, stay close to the principal that it should rarely take the user more than 3 clicks to get to the focus page of a purchase (or information is that is the purpose of your site) barring, of course, a user's desire to browse: main nav -> lead in page -> product page.

  4. Through their interaction with your site, are mishaps recovered from quickly? Is each step clear and intuitive?

    The Fourth Chakra: The Experience (UX) Usability

    • Responsiveness - Any device, anywhere i.e. mobile first design! Any more one of the most important aspects of a positive user experience is how the site works on mobile and tablet devices. You may create the perfect UX for a laptop or desktop computer that fails to "play nice" in these smaller viewports. Granted, many devices these days have resolutions that are equivalent to a laptop, but that by default does not mean that a "desktop" experience still works well on a tablet, or still more - a mobile phone.

      The "pattern" most often employed in UX design and development follows a "mobile first" methodology. That is, design first for the mobile experience and graduate toward the tablet, then the laptop/desktop.

    • Graceful error handling and recovery {friction over flow} - anticipating what could possibly go wrong in a user experience - either with the code or with an errant user action - is an often over looked aspect of design. More often than not we implement designs and turn them over to the QA department who find the issues which might then lead to the necessity of refactoring code - a bad thing indeed.

      Errors in coding are not usually evident until the QA stage. But we can anticipate what a user might misconstrue and plan for a graceful escape without losing the user's attention and/or interest.

    • Elemental consistency fosters learnability - Any page on your website that serves as the first page a user encounters should begin the process of "learnability", that is, the user should be able to immediately identify certain aspects of your website that, when they navigate to another page, there is already enough they have learned from the first page to speed their finding the goal (both their's and yours). This is achieved through consistency across all facets of your site's design.
    • Animations which heighten interest and continued engagement - NOT annoying or "because we can". It's sometimes tempting to add "cool" elements to a page because YOU think it ads something. However, it is often the case that animation is distracting {friction over flow}. Sometimes such a distraction is desired, either from a user's standpoint or to support a business goal ("Click me! Click me!"). But the use of animation should be at best limited - very limited.
    • Performance - Is the page slow loading? If it is and is unavoidable (e.g. slow APIs), are you communicating to the user you know it takes long? One suggestion, especially regarding API responses, is to firstly display a spinner, then a short wait, then a text message. The "stepped" method of display, in addition to the communication via the spinner and text, it conveys you are aware that "this" takes a bit of time. It conveys a professional communique to lull the user into acceptance and patience.
    • Subtasks after a flow has begun - Subtasks should be few and should maintain consistency and logical "stepping". The norm I am used to implementing is Click to begin -> Share demographic requirements -> Complete task (i.e. purchase). These tasks should be easy and quick to discern and even engaging and intuitive to perform. A user should not have to ask "what do I do next?" - it should be naturally discerned without thought.
    • Predictability - Can users doing an unfamiliar task predict where and how to complete that task? This dovetails into the above. This doesn't mean "dumbed down". It should reflect the knowledge you perceived when you established your site's persona.
  5. The user has found what they are looking for. How is that content received? Will you enter into a transaction with the user?

    The Fifth Chakra: Content is (still) King

    • Clear offerings - that leave no room for doubt or question as to what the user will gain (the value proposition) if they commit to engage in a relationship with your site, your business. That is what they should feel they are doing - establishing a relationship of their own free will.
    • Concise textual communication - is the key to the sub-point made above.
    • Minimalistic copy - Short and to the point copy should be all you need to acquire and retain users as customers and clients. If your site is an information site, strive to keep lines of text to a minimum for ease of reading. When reading text, our eyes scan back and forth over the lines of text. Optimal line length is normally around 50 - 75 characters per line. Achieving that is dependent on the font type used and font size. Keep in mind also the responsive (i.e. changing) interface.
    • Supplemented by visuals - when prudent and proven helpful, as mentioned above. These should serve as hints and/or explanatory visuals that help to understand difficult concepts.

{friction over flow} - friction is anything that impedes a user's success in reaching their goal, which, in turn, impedes your business goals.

bul • let • proof :

adjective : safe from failure; without errors or shortcomings and beyond criticism; a bulletproof website