Click to download the infographic vector PDF:

Hello. My name is Erik and I am a UX designer with a degree in psychology.

Earlier this week, I saw a blog post that casually presented the idea that companies will soon be seeking out UX people with psychology and anthropology degrees. As someone who has been working in the design and UX field for a long time, and also has a degree in psychology, I figured I could talk about how that education influences how, and why, I work.

The psychological aspects of UX design are familiar to pretty much every serious UX professional I’ve encountered. There is no one who will deny that good design of any kind takes a great deal of human psychology into account.

Today, I want to approach it from the other side. Instead of standing in the context of UX and talking about how we incorporate psychology into what we do, I want to stand in the context of psychology and how I see it flowing down to UX and look at what a UX Psychologist would actually bring.

Breaking It Down

The concept of psychology as a formal behavior science is a vast topic. There is no way I could capture everything in a single blog post. So I’ve taken what I feel are key areas of study and put them in 3 general groups:

1. Behavior Science
2. Research, Testing and Statistics
3. Applied Psychology

Behavior Science

This group forms the areas that examine just how the brain, behavior and thinking work on both a physical and cognitive level. Let’s begin where everything starts and ends: the physical brain.

Neuropsychology

Neuropsychology deals with the neural anatomy of the brain and the physiology of all human thought and behavior. It’s how everything “happens.” I have always held neuropsychology as my favorite area of study. The limitless complexity of how thought, memory, learning and emotion interact on a physical level is the fundamental base that all the rest of psychology rests on.

In UX design I am not consciously thinking, “This is going to be a big hit with the cingulate gyrus,” but I have a subconscious understanding of what is going to occur with the senses and in the brain. In its truest sense, UX is trying to break through all the abstractions of computers, screens, devices, eyes, ears, and get right to the source – the brain.

The way I see it is if I can’t hit the areas of the brain that are going to facilitate the right experience, the design not going to work. It doesn’t matter if I’m designing a digital product, a service, or an environment. Specific brain-buttons have to be pushed in order to give us the result we want. I find it very valuable to know what those buttons actually are and the functional neural anatomy of what makes a person, well, a person.

(Oh, about the cingulate gyrus – put simply, it helps link emotion to sensory input. When an event happens, you have a emotional response. It helps associate that event with the emotion to create a learning experience.)

Experimental Analysis of Behavior

Stacking right on top of neuropsychology is behaviorism. Broken down into a single sentence, behaviorism is about conditioning and shaping behavior through reinforcing specific actions. BF Skinner conditioned pigeons to know how to push the correct buttons to get food, Ivan Pavlov conditioned dogs to salivate when a bell was rung. UX designers condition people to take actions that facilitate the experiences we are trying to create. It is all the exact same thing. BF Skinner and Ivan Pavlov? They were just pioneering interaction and interface designers.

Behaviorism is the paradigm used when trying to make something “sticky.” When I’m building something, I don’t go over every detail and interaction thinking, “how will this action reinforce the behavior I want and condition the user to act in a specific way?” Being aware that UX relies on associations and reinforcements helps me design with behavior shaping in mind. When a design really needs a specific reinforcement loop, it’s easy to know how to add one to the process.

The important notion I remember when studying behavior is that every living organism learns through the exact same chain: stimulus -> response -> reinforcement. From the worm to the human. It’s called “associative learning” and it’s what interaction and interface design is doing when they create the feedback loop between the product and user. Taken to the extreme, behaviorism can have very powerful effects. If you want to see how patterns of reinforcement work to condition users to behave in a certain way, just take a look at any Zynga game or other successful gamified product that relies on achievements, instant in-game purchase, and social integration. It is the epitome of operant conditioning and literally modern Skinner Boxes.

Cognitive Psychology

We started with the brain, now let’s talk about the mind. Cognitive psychology is all about how we think. Thinking encompasses memory, learning, encoding, recall, perception, language, problem solving, abstraction… all of the things we think of when we think of thinking. Thinking about thinking. Personality, intelligence, emotion, it’s all based in the higher order cognition that makes every person so unique and unpredictable.

Did I just say that emotion was a cognitive response? Sort of. There are sensations we experience as humans, originating from the limbic system (the lizard brain). Think “fight or flight.” These are the primitive feeling that most animals share. But emotion has one possible definition that is a little different. Emotion is when you link a sensation with a cognitive thought. In UX design, we seek to tap into that limbic brain and elicit a response, which we hope to pair with a thought that works in our favor. That is what is meant by a “delightful experience”, when you successfully link that sensation with the experience.

One of the other cornerstones of UX is the mental model. It’s the mindset and point of view of the user, and a prerequisite to empathy. Cognitive psychology looks at how mental models are formed and how they work. It’s so important when doing UX to divorce yourself from your own mental model and stay centered on the user. It’s the “Inmates are Running the Asylum” principle and the reason personas are so crucial. The persona acts as an avatar for the mental model you are trying to accommodate. The purpose of the persona isn’t to be a perfect representation of the users; the purpose is to give you a visible signpost to guide you out of your own mental model biases.

UX is a human-human interaction science, and how humans relate to one another is through cognition. There is no objective truth, everything we accept as reality is really just the world being filtered through our personal mental model.

Research, Assessment and Statistics

One of the misleading portrayals about psychology is that it is all about the “talking” part. Movies, TV, books all show the counseling, therapy, “clinical” aspects of professional psychology. The boring reality is that most of psychology is about research, testing and statistics. Everything we know about modern human behavior is coming out of the work being done in countless labs and universities across the world.

Research Design

This is the planning that goes into building a hypothesis and designing the way you are going to gather data and run your own experiments. Scientific research design an area of study that is so detailed and rigorous, I don’t think it’s something that can be learned without some sort of formal education process.

The purpose of learning to design research is to ensure from the start that the data you hope to extract is valid. This means that your methods had scientific rigor, and also that you took care to remove as much confirmation bias of your own as you could. Most bad data is due to human bias and lack of preparation, it’s something that gets overlooked since we’re so eager to prove out our assumptions. In a university setting, your research design has to be approved by an institutional review board, and any part of it that doesn’t meet a certain scientific standard will get it rejected and send you back to the drawing board. When dealing with people, the ethics of how you handle your research applies both in how you gather it, and also the effects of how you present it. It teaches you to do it right and to understand the value in doing so.

I took part in a number of student-ran projects, and was named as an author in a study being prepared for peer reviewed publication. We were re-evaluating a battery that was meant to look for posterior brand damage, trying to increase its sensitivity to reduce false-negatives. I redesigned the testing instrument; a series of visual cards presented to a subject, and then conducted the face to face administration of the test. We worked right with people who were presumed to have subtle brain injuries and it was our job to detect those in juries that less sensitive instruments would miss. The point of this story is that the exposure to this type of activity is something I couldn’t have got anywhere else.

Assessment and Testing

Assessment is a subset of research. It’s all about constructing and administering batteries. Things like intelligence tests, personality tests, aptitude tests, and diagnostic tests for things like depression or anxiety. Part is just gathering qualitative data, and part is confirming or refuting assumptions with quantitative data.

I see the biggest impact of assessment knowledge in when I create persona interviews and other qualitative user research. It’s like putting on a cast-iron divers helmet and just jumping into the ocean. I am not looking to confirm anything specific, I just want to bring back information on whatever was beneath the surface. Once I’ve brought back data, I have a base on which to start testing.

Testing is a different tool. If I stick with the analogy, now I’m diving into the ocean to prove or disprove a specific hypothesis. I know there should be a sunken ship at this location, let’s see if I’m right. This is what is taking place when we run AB tests or UI test. Sometimes we want to gather holistic data about users, and sometimes we need to test a specific assumption. It is important to me to know when to choose one method or another and the benefits and drawbacks of each.

Any data is better than no data. Gathering information before designing solutions is something I push hard to do. The more I do UX on a large scale, especially in the enterprise, the more I am convinced that research and assessment is going to be a major part of UX across the board.

Quantitative Psychology

Statistics is a science unto itself. It’s fascinating to see that big-data is taking over the world of technology and startups.

In UX design, I’ve found that it is very difficult to get the type of volume you need to draw significant statistics. There are situations like in e-commerce where you can get enough traffic to draw quantitative insights, but in the world of developing products and services, it can be difficult to have enough data to qualify as real statistics. Even so, knowing when data is applicable and when it isn’t gives you the chance to shore up areas that may be lacking any information.

I think most of the time in UX we use the statistical mindset to tread carefully when we know we don’t have enough data for a high confidence level. It is like an anti-pattern, we judge how flimsy our assumptions are based on which has the least amount of data available. But even with very small samples sizes, there are techniques that can be used to draw insight out of those limited numbers. Like everything else you carry in your UX toolbox, the most important part is just knowing that the tool exists and can be utilized when needed.

Statistical research isn’t unique to psychology, there are a lot of domains that approach stats in just the same way. It’s a staple of economics and big business. As a UX designer, it’s my job to push for the notion that proper UX design needs to be afforded the time and resources for adequate evidence based research.

Applied Psychology

Throughout all my education, applied psychology is where I spent the most time. This is taking all of the principles of psychology and applying them with how you interact with people. When you picture someone lying back on a couch while a white-bearded Austrian* says, “Tell me about your childhood,” that’s applied psychology.

(*No one really lays back on a little couch, and Freudian psychoanalysis is a fossilized technique that has almost no modern usage or application.)

Empathy

I want to single out empathy apart from everything else. When a person wants to become a psychologist who works with people, there is a huge focus on learning and practicing empathy. All of us have varying levels of natural empathy, some people are very empathetic, and some aren’t at all. But to be a practicing psychologist, counselor, or therapist, empathy is something you are trained in and constantly practice and improve upon.

It’s a funny idea. Learning how to empathize sounds like you’re trying to learn something that you should be innate. But there are real techniques and practices to effectively empathize with people. This is where I see UX going, and I’m not alone. The idea that user empathy is a legitimate focus in UX is slowly gaining acceptance and not being dismissed as new-age pseudoscience.

I think it’s a mistake to assume that only special, innately equipped people can “feel” empathy, or that the biology of gender is a determining factor. Empathy is not about waiting around for a transcendental emotional transference from the user to ourself. Empathizing is a verb, it’s something that you do. There are skills you can learn and practice to better empathize with people, you don’t have to be a psychic who can magically feel another’s emotions. Even considering empathy as a valuable tool gets you halfway there, as you are acknowledging the legitimacy that in UX, the users perception is more important than our own.

(I do realize that the concept of empathy has a whole other debate on the level of nature or nurture that influences it, if there’s a biological gender component, and the hypothesis that the ability to empathize might be totally absent in those with autism or certain personality disorders.)

Listening

One of the most important aspects of applied psychology that can be used in UX is reflective listening. It’s a simple but nuanced practice where you genuinely focus on what someone is saying, and then reflect it back to them to confirm that you understood correctly. What happens is the listener begins to empathize more and more as they are focused just on understanding and clarifying what is being said, and the speaker begins to feel a sense of safety and validation from being heard without judgment or interruption. As the interaction continues, the listener is able to elicit deeper and more meaningful responses that they would have otherwise.

The practice originates from a specific psychologist, Carl Rogers, who started a school of thought called client-centered therapy… sounds a lot like user-centered design. It’s something that has to be seen to be believed. I did a lot of reflective listening as an intern with a clinical psychologist, and was a co-teacher for a parenting class where we would teach parents how to employ this practice with their children. The results were remarkable, seeing angry teenagers open up to their parents and both of them sobbing within minutes, communicating effectively for the first time in recent memory. There are not many communication tools more powerful than reflective listening, since the act of truly listening to someone happens so rarely. Imagine what happens when this idea is applied to UX user research.

The most beautiful part? This skill is easily learnable. When doing research with users and listening to what they say, you get the same high value communication that a clinical psychologist would. It’s imperative to realize that it’s not called “ reflective waiting-for-your-turn-to-speak” for a reason. In fact, Carl Rogers was criticized for his therapy sessions consisting only of the client talking while he would empathetically say “mmm hmmm” and “how did you feel when that happened?” But it does work, and he is one of the most influential and relevant psychologists of the 20th century.

I have learned and internalized that there is a method to understanding that a person could feel a certain way, reflecting that feeling back to them, validating their existence, but not getting wrapped up in whether I agree with the reasoning or not. Empathizing doesn’t mean that you blindly respond to the user’s needs, it just means that you get a clear picture of how they think, feel, and experience things so you can make better decisions when you start designing things for them to use. And for the record, this absolutely doesn’t mean that you ask them what features they want and then go build it because ”the user asked for it.”

The UX Psychologist

This is what I see an education in psychology bringing to UX. There is countless more writing that could be done on the psychology of design in regards to the presentation of interaction, UI, visuals, sight, sound, touch… but I wanted to focus on the specific areas I studied that are directly transferrable.

Are we approaching an era where companies will be hiring professional psychologists to work on their product design and UX teams? I think we are getting closer. We know that professional psychologists are already working in other human-focused industries, the logical progression is for UX to drag behavior science to the table as an asset recognized by the industry. The stakes are getting too high to leave out the focus on human-human interaction.

All that being said, should you run out today and get a psychology degree? Only if you’re okay with it being supplemental to your career but not required. It’s important to remember the context of where UX takes place right now, in the internet and product design, and slowly gaining ground in service design. It all depends on which aspects of UX a company wants to invest in. Sometimes it’s more on the psychology side of UX, sometimes it’s more on the design side. Either way, we as UX practitioners are responsible for including behavior science in what we do, formally or not.

The merging of behavior science and UX is here to stay. Companies are looking for UX designers that are widening the scope of what they do towards incorporating more formal psychology into their toolsets. I think over the next 5-10 years, we’ll be seeing companies and startups looking to hire people with a psychology education who have a knack for UX, and not only designers with a knack for psychology.

Which of you will be the first with “UX Psychologist” as your official title?

There’s a Branch going on this, get in there and contribute: http://branch.com/b/formal-psychology-roles-in-ux-and-tech-companies 

(Update: There is a new “The Brain Behind UX” infographic to go along with this post, if you don’t have it yet you should click here to download it.)

C’mon you guys. Saying that UX is limited to product design is patently false. We’ve been talking systems and context for years.

— Jesse James Garrett (@jjg) March 15, 2013

Every day, the value of UX is being uncovered more and more. It is being recognized as something that contributes to more than just product design. The design of systems, services, and journeys are all becoming legitimate focuses separate from traditional design skills. Even degrees in psychology are starting to appear in job description requirements. A higher-order paradigm of UX is slowly overtaking the outdated view that it is only deliverable discipline. This is the sentiment that UX designers need to start taking to heart.

Raiders of the Lost Art

In the UX is not UI article, I wrote: “UX is the intangible design of a strategy that brings us to a solution.” I think I used the word “strategy” because it is more familiar to people from the business development world. If I were to hone the meaning right now, I would probably trade strategy for systems: “UX is the intangible design of systems that bring us to solutions.” A subtle change, but I think it resonates better with higher-order UX. Moving from thinking of UX as a production skill, and into thinking of it as a systems theory skill.

One of the reasons it has been trapped as a production skill is the idea that the artifacts we create are goal of UX. Creating a wireframe or mockup off the cuff, with no UX work really coming before it, propagated the idea that jumping to endpoint artifact creation was enough. This led to a pushback from the UX community to get away from artifacts as a highlight and focus on the more intangible aspects. I agree with the sentiment, and I think the point of artifacts needs to be reiterated and cast in the appropriate light. A clear message about the purpose of UX and how artifacts are used.

The message is simple: become true UX archaeologist-adventurers and find the lost meanings. Make the switch from designing for artifacts to designing for experiences.

Every clue he followed. Every discovery he made.

Cultures create artifacts. They are discovered by chance, dug up and sent to museums to be analyzed. They are a tangible output of a cultural system, experienced by those who journey through that system. Without knowing that journey and context firsthand, we infer things about the people that created these artifacts and what the world must have been like to influence the design of such creations. The clues are pieced together until we feel that we have some sort of representative picture.

The purpose of artifacts is to symbolize something; to turn the abstract into the concrete. The concepts can be communicated between people and maintain a consistent shared meaning. Without meaning, there would be no emotional impact. Without emotional impact, experiences are dull and forgettable.

I’m not much of a post-structuralist, so let me bring it back into the context of this blog. If we take this idea and apply it to UX, all of the artifacts we create during the design process are just symbols used for shared understanding between the people involved in both the creation and consumption processes. The sketches, flows, wireframes and mockups are symbols that facilitate the design and development process. The interfaces, interactions, sights and sounds are symbols that facilitate the user’s experience. They all serve the purpose of conveying intent and meaning. The quality of what we create depends on the quality of the process we use when trying to document and communicate the intent and purpose behind all of our hastily done drawings and notes.

It belongs in a museum

The problem that teams and organizations run in to is when UX artifacts don’t convey a shared understanding they become ambiguous relics. The value is questionable and the intent unclear. These are the un-validated personas, the nonexistent IA flows, the out-of-context wireframes, the UI based on guesswork or habit. We look down at these relics and say, “Well, let’s build the best thing we can with the knowledge we have.” It’s pseudo-UX on par with cable-news commentators treating the bogus surveys on their website as a valid source of statistical research.

Without the contextual knowledge, we’re simply antiquity raiders stealing things we don’t fully understand. Shiny things that are devoid of meaning. But we know with a little hand-waving they can be sold for a profit. If you’re a real UX archaeologist-adventurer, you know the importance of artifacts and the context and meaning they symbolize. You know how easily they can be misused and fall into the wrong hands. Save them, Obi Wa– (oops wrong movie).

I’m going after a find of incredible historical significance

When we examine an historic artifact; a golden idol or clay tablet, we do our best to peer back in time and figure out the context of why it was created. We dig for clues, make inferences, or just rely on intuition to try and figure out why this artifact exists at all. Applied to design and UX, we look at our creations and judge them as bad experiences, difficult to use, or a solution in search of a problem. It may be a finished product, a service, an interaction, a wireframe, a prototype, literally anything that is “produced.” We end up with pseudo-UX again, artifacts that resemble the tools of UX design, but aren’t linked to any clear shared meaning.

So we look backwards to figure out why the experience is bad, why the product isn’t usable, or in extreme cases why the product even exists at all. We become UX archaeologists-adventurers trying to find the origins of how this thing came to be. We dig towards the center, knowing that when we find what is buried beneath we can venture back out with the knowledge we need to give that artifact meaning.

“And what did you find?” “Me? Illumination.”

The most important thing to remember is that people experience systems, not artifacts. Artifacts are ONLY useful as facilitators of an experience; no exceptions. It is a false assumption to think that your product or service has no “UX.” Everything has a design and everything has a user experience that is judged from bad to good.

Thinking of systems as something UX can design is a bit of a departure from the factory-floor world of delivering Tayloristic artifacts. This is especially true if your organization or team is a top-down structure where all the people in the process aren’t integrated and represented. They are broken into cadres that handle various aspects of the process, passing artifacts down to the next group with the artifact’s intent accepted a priori. It’s the bane of the individual contributor who wants to be more involved in the early stages of a process, and an obstacle of real UX design thinking.

You’re strangely dressed for a knight.

UX is the business of context and meaning. When we start by designing contexts and systems, the emergent artifacts become much more valuable. We won’t be buying and selling them like antiquity smugglers, we’ll be producing things out of a system that has a clear vision of why and how it produces things. These artifacts have a context that creates a shared meaning between stakeholders, and evokes emotion in those who experience it.

As UX continues to evolve, the bullet-list of UX competencies won’t just be artifact-creating skills. It will become list of ways that UX designers contribute to the facilitation of a much larger vision. This is the definition of real UX. Stop trying to solve problems by focusing on building better artifacts. Commit to designing better contexts and designing better systems. Meaningful and relevant artifacts will be the natural result of this process.

We’re all on a UX adventure together. The next time you have the opportunity to choose between context based UX and artifact based UX, choose wisely.

I am really excited to see what this entails. It’s such a different slant than the traditional UX conferences and workshops that focus mostly on applied techniques. The opportunity to hear from UX thought leaders talking about UX leadership and company vision guidance sounds absolutely fascinating and like a tremendous learning experience.

And please pray to the Migraine Gods to give me one weekend of respite.

Thinking back, do you remember appreciating any of this the first time you saw it? What about the second time? Would the presence (or lack) of those details have affected your enjoyment? These are questions that can’t really be answered. I certainly don’t remember noticing any of those details. We can’t know what impact was, the details were all rolled into the movie and became part of the many intangible aspects that made it a success.

“Who Framed Roger Rabbit” went on to win 4 Academy Awards; Best Sound Editing, Best Visual Effects, Best Film Editing, and a Special Achievement Award “To Richard Williams for the animation direction of Who Framed Roger Rabbit.”¹

What got me writing today was a combination of two things: an article I read today on FastCompany², and a specific memory of a phrase I came upon while reading through a comments thread on Hacker News³ concerning the value of paying attention to detail.

It’s not a phrase I had heard before, but it’s one I now take to heart. The phrase was “bumping the lamp.”

Bumping the Lamp

This is a phrase that Disney animators have adopted after a particular incident that has become a part of the companies mythos. It refers to a scene where the live-action Eddie Valiant drags the animated Roger (pun intended) into a room to try and saw off a pair of handcuffs. There is a lamp that hangs from the ceiling, and Eddie bangs his head on it repeatedly as they struggle back and forth. The light from the lamp moves wildly around the room as it swings, rapidly shifting the light and shadow across the two live-action actors and all of the props on the set.

(See the scene on YouTube here)

There are a few varied but similar accounts on how this story came about. According to one retelling, the scene didn’t originally have the swinging lamp gag. It was after reviewing an early cut of the scene with rough animation that director Robert Zemeckis decided that having Eddie continually bang his head on the lamp would add to the scene and be a lot funnier.

The scene was reshot with the lamp gag added. The animators had to re-draw all the frames that had Roger in them and account for the dynamically shifting light. Each contour of Roger’s limbs, ears, clothes, face… everything had to by lit and shaded as if it was right there in the room, and then cast the appropriate shadow onto the set behind him. A tremendously arduous and detailed task.

As the story goes, the incredible attention to detail when drawing the shadows is something that the animators added of their own accord. It is believed that no one would have noticed if Roger’s dynamic shadow wasn’t perfectly in sync with the lamp, and that this extra detail was almost superfluous. This was long before computer animation was mainstream, audiences had no expectations for this level of realism. What compelled the Disney animators to pay special attention to something that would barely be consciously noticed? Were they anticipating those Academy awards and knew that their peers would notice and appreciate their extra work? I don’t think so.

Reportedly, Michael Eisner has used this story as an example when promoting how Disney animators go the extra mile when paying attention to details. Details that the audience might not notice. Details that if left out would not have affected box office revenues one bit. So why did it matter enough that the animators did it anyways?

Knowing What Matters

In the work that we do there will always be small details and things that have room for improvement. There will always be a gnawing sense when you know something you care about isn’t quite right or lacks a certain completeness. A feeling that you’re neglecting something that matters.

But how do you decide which details matter? Do you do it because they are things our users or customers will notice and appreciate? Because other self-proclaimed “creatives” will ooh and ahh over our craftsmanship? Because it will increase revenue? Should we only pay attention to the details when it has a measurable and significant effect?

No. You don’t need external motivation to justify your actions. You do it for yourself. Because it’s who you are and what you do as a “creator of things.” By their very nature, the things you create are impermanent. What stays with you is the care that emanates from within. The intrinsic motivation that can’t be taken away.

It doesn’t matter if you’re a designer, programmer, business exec; If there’s a detail missing you care enough to notice, care enough to add it. If you hear a voice telling you it doesn’t matter, saying that it’s indulgent, that it’s obsessive, ask yourself: who that voice belongs to. Is it your own?

If the concern is that the extra attention to detail won’t affect the bottom line in a significantly positive way, ask yourself if it will affect it in a significantly negative way. The concern about wasting resources when caring about details reminds me of the guy who wants to start lifting weights, but warns that he “doesn’t want to get too big.” Don’t worry buddy – you won’t.

Perfection Was Never the Goal

I’m not advocating obsession and compulsion over minutia, and I absolutely believe that perfect is the enemy of good. It’s not about perfection. Fine attention to detail doesn’t make someone a perfectionist, you can still care a great deal about what you do and remain efficient. The care you put into your work will guide you towards what you feel is best, and give you the confidence to know when you’ve paid just enough attention to stop.

If a certain level of care and attention is a part of who you are, don’t deny it. Caring about what you do and valuing details are traits to be admired and emulated. In the world of technology, startups, and products, it’s a constant balancing act between knowing when to ship and when to hold off. Some believe that they can’t afford to do more; I believe that they I can’t afford to do less. In the end, intrinsically motivated passions will always take you farther than externally derived demands.

Links
1. Wikipedia – Who Framed Roger Rabbit – Awards
2. When Good Enought Isn’t
3. Hacker News

One of the problems we face is that the various UX roles aren’t specific enough yet to be widely acknowledged as discrete. The various terms are still “differences without distinction” in many people’s eyes. Notice on the Google trends graph “UX Design” is still on a steep climb whereas other possible titles are still on a plateau. “UX Design” didn’t have enough of a presence to be tracked until 2007, and “User Experience Designer” became visible in late 2007. Not surprisingly, Information Architect appears to be on a decline!

All the UX Hats You Can Wear

It might be easier to view these roles not as compartmentalized functions, but as hats that we all wear. Researcher. Information Architect. Interface Designer. Interaction Designer. Visual Designer. UX Designer. {Other}.

A smart person would say “I need all of these roles? Are these job titles? Are you UX people running on pure ego thinking that six people have to be hired to do proper UX?!”

Not at all! These are the names of some of the more prominent UX hats that we can all wear. They have fuzzy, gray-area edges. They aren’t formal or official, and I’m certainly not insisting you have a single person for each hat. If your company or project was large enough to justify full-fledge teams, it’s nice to have a person for each hat. But this article isn’t about adding more people, it’s about utilizing the hats in the most efficient way you can.

All Size Fits None

The problem with hats is that there are only so many that can fit on your head at once, and only so many times you can switch hats before you become very inefficient and lose focus. This doesn’t stop people from trying with the best of intentions.

I didn’t invent these hats, and I’m not the authority. There are probably some things in here that people will disagree with, and omissions I just forgot. I hope it can act as a good starting point though, and hopefully spur some discussion at your company or right here in the comments section /wink. Let’s take a look at some of these hats and the type of value they produce.

The Research Hat

The research hat is focused around identifying the user, their problem/goal, and tying it to the business problem/goal. The job of the UX research hat is to find out what actually occurs in the user’s head, translating that into documentation that everyone can share and validate against. The UX research hat relies on a heuristic process for both the user and the researcher. We learn about them, but we also learn about ourselves and our own assumptions and confirmation bias.

Rapid experiments that are conducted without a specific outcome in mind lets both the user and researcher uncover things at the same time. Questions and interviews that are open-ended and unstructured can be very effective, letting the user talk their way through the problem without the interviewer coloring the conversation. No “what is it that you want” questions, but instead “tell me about your experience with this” or “what is this like for you?” If you aren’t familiar with Reflective Listening, get familiar and integrate it into everything you do.

The activities under the research hat can be focused on documenting the user’s behaviors and providing that data back to the team and stakeholders. This can be done through observation, interview, or conducting rapid experiments to quickly validate assumptions while out in the field. What is important is that you bring back enough data to form a common vernacular around the users point of view. It allows that user you have been researching to become a “person” and helps everyone empathize with them a little easier.

What the Research Hat Delivers

• Usage and usability observations. Data that can help developers, designers, and other UX hats see obstacles before they become bad experiences
• A representation of the user’s level of knowledge, the words they use, behavior patterns, counterintuitive assumptions, levels of frustration, consistency between users.

Where the Business Value is Manifested

UX research provides the tangible data and feedback to help everyone stop jumping right to the solution. The biggest value that the research hat delivers is the clarification of the actual user problem that is trying to be solved. Targeted problems cut down on wasted time, unvalidated assumptions, and going down paths that have weak evidence that they are actually solving the the user problem, and not just a user problem.

The Information Architecture Hat

Information Architecture (abbreviated as IA), is how you organize information and content. It’s about process and flow, how does the user best get from point A to point B and how the construction of the content facilitates that. This involves determining the relationships between things, recognizing patterns in how the user perceives what is presented, creating a taxonomy, and most of all understanding the feedback loop between the user and the things they interact with. I have often described it as determining “right thing, right place, right time.”

The Civil Engineer

The IA hat is the UX equivalent of a real world architect or civil engineer. Is the structure sound? Do the people who use this thing have access to all the right places? Does this layout make sense? Are there any dead-ends we aren’t seeing? Does this creation serve its purpose? Is it safe (usable)? The person in the IA hat is who tells you “You wanted a bridge to accommodate certain needs. Here is how I’ve engineered how it should be put together.”

What the IA Hat Delivers

The IA hat delivers some of the most powerful parts in a UX process.

• User flows. Process flows. These are the maps that show all the options, decisions, divergent paths, roadblocks, and journeys through your content. The map of how a user will accomplish the behavior you’re trying to facilitate.
• Hierarchical structure maps. How the grouping plays out. Which parts of your product are contained in other parts. What things need distinction from others.
• Site/Product maps. These correlate to the navigation and allow for smart nav and menus to be created.
• Documentation that puts everyone on the same page of how things will flow and work conceptually.

Where the Business Value is Manifested

I see good IA work as one of the biggest pillars in a smart UX strategy. It’s how the research, or assumptions, are turned into something you can actually start to build. The IA is a huge part of what makes something usable and a good experience. I have a belief that a modern product with good IA but weak UI is better off than something with bad IA and a sexy UI. If you have to pick, go IA over UI.

The UI Design Hat

If there is research and IA, the UI hat can be worn with confidence. It is a style of work that will likely be iterating very quickly between the parties, developers and UX both. Changes, tests, modifications and deletions will be happening hourly or faster.

This is one of the hats where specific UI experience and talent need to be present in the person who is wearing it. The UI design hat has more gray area than some of the rest. If someone is prepared to wear the UI hat, they might also be a front-end developer, or at least a skilled HTML/CSS author. They are probably one of the primary people who will be designing wireframes as well.

What the UI Design Hat Delivers

The UI designer hat can be technical or non-technical. That is going to be based on the person. Both types

• Provide the interface elements to be used in the mockups and prototypes
• Come up with how the interactions will be executed and facilitated through visual flows, annotations, and prototyped examples
• Come up with how the behavior feedback from the product will be manifested
• Play a big role in wireframing and layout decisions.

If the person wearing the UI hat is technically inclined, they can also be providing

• Clickable prototypes of varying levels of interaction. May use a prototyping tool, may be HTML and JavaScript based.
• HTML and CSS to be used by developers
• Working on the actual production HTML/CSS or JavaScript, and maybe preprocessed or server side code like clojurescript/coffeescript/lisp or php/ruby/asp, etc

Where the Business Value is Manifested

The value of UI design is one of the easiest to see. This is because no matter what, everything has some sort interface, no matter how subtle or invisible. Good use of the UI hat will help ensure best practices in UI affordance, provide specific UI to the visual designer hat to be mocked-up, and offload interface decisions from developers who may not be inclined or interested in taking that on. When the UI design is taking place, you are far down the path of creating the things that people see and touch. Stakeholders and test-users will start to get excited. Good research and IA will really make this a very productive time.

The Interaction Design Hat

Interaction design (IxD) is how you determine the behavior of your product and how the user will interact with it. This is the feedback loop that goes in both directions. The product responds to the user’s input, and the user responds to the products feedback. The way these interactions are crafted and planned is what the IxD hat figures out. It’s a very cognitive role that relies heavily on exploring heuristics and “how is the best way for the user to use this?” The IxD is a gray-area hat much like UI or IA. The person who is wearing the hat will need some specific experience and skill. It’s not one that can just be ad-libbed by a neophyte. There are entire organizations dedicated to IxD and the vast skill-set that it requires.

What the IxD Hat Delivers

• Very important definitions of how things are going to actually work and facilitate the users desired behaviors on both the project and application level
• Specifications to the UI designer on what needs to be available in the interface to make the interaction happen
• Something interactive to use and test with users via prototypes or early versions of what you’re building
• Smarter interactions that can more effectively target the user’s problems and provide more effective solutions
• Smarter interfaces that communicate back to the user what is going on, providing trust and clarity
• Focusing front-end development on what needs to be built and how it needs to work on a functional level

Where the Business Value is Manifested

IxD is where your behavior feedback loop is traced. It can show you how close you are to bridging the gap between the business problem and the user problem. It’s a hard job, and getting it done right brings immense value.

The Visual Design Hat

This is the hat we all know and love. Finally something we can see and feel. The impact the visual design hat is “hard to define, but easy to recognize.” It also the most abused hat, often given the most focus and energy to applying veneer to something that desperately needs a more solid foundation. If the first words you hear on a project are lipstick, jazzed up, sexier, cleaner; stop everything you’re doing and make damn sure you know what problem the visual design hat is trying to solve. Better visual designs on a bad foundation will never, ever, save you.

What the Visual Design Hat Delivers

• The aesthetic. This includes the final look and feel, the style, the theme, the recognizable brand and identity
• Mockups for prototyping and demo purposes
• Mockups for developers to implement with working code
• Tangible representations of all the work that has brought you here that stakeholder can see and react to
• The graphic assets needed for the implementation of the finalized product
• Styleguides and pattern libraries to keep the design consistent across products and provide a template for everyone to refer to

And let’s be honest – there is nothing wrong with sexiness if it’s not veneer. If the others hats have delivered their value, the visuals can take a product to the next level. You can’t over-estimate the power of the visual layer when it is accompanied by good UX.

Where the Business Value is Manifested

• Differentiating your product from others when being viewed by potential sales or users who have nothing to go on but how it looks in a screenshot or marketing piece.
• Visual appeal that has a big impact on how users perceive your product. It can make products feel trustworthy, fun, serious, consumer focused, enterprise focused, all through how the presentation layer is crafted
• Reinforcement of the brand and messaging that comes across through the visual implementation. It ties together the far end of an end-to-end user experience.

Visuals are important. Your book will always be judged by its cover.

The UXer Hat

This hat brings cohesion between all the hats. With any project, the UX efforts have to be coordinated and flow from one to the other. Someone has to have a high level view of the entire battlefield. Needs have to be assessed, plans created, priorities made. UX doesn’t take place in a vacuum, and with the amount of points that UX touches, there is communication that has to take place between various other disciplines and parts of a company. Product management, development, QA, middle management, executives – they all have different needs for UX communication and documentation.

It’s hard to pin down exactly what this UXer is actually called.  In some cases, they are on a management level. In others, they might be on the individual contributor level.  Either way, someone is going to end up wearing this hat. Depending on who you are or where you work, the UX hat-wearer can be known as “UX (or) Experience:

• Designer”
• Architect”
• Engineer”
• Manager”
• Principal”

There is not a true UX Designer hat. If someone is a UX Designer, his or her role translates to “I wear whichever hat is needed at the time.” If a UX designer is working alone, they will have to move from hat to hat depending on what is needed at the time. This doesn’t mean that the UX person isn’t highly skilled wearing one or all the hats. But in the real world of business and shipping product, things move too fast for a UX generalist to cover all the hats comprehensively.

Where the Business Value is Manifested

Having someone who manages the UX effort is essential. Again, this doesn’t mean they have to be in a personnel management or supervisor position. It just means that there is a knowledgeable and experienced individual that is at the helm of the UX effort. Also, I would always advise against filling a UX management or supervisor position with someone who isn’t experienced and able to augment or take on any role at any moment. UX is a craft, and it needs to be guided by someone who has fundamental knowledge of all the pieces. Just because you drive a Camry and have seen Days of Thunder doesn’t mean you stand a chance in a NASCAR race.

Perfect is the Enemy of Good

You don’t always need all the hats. Hats can be moved, put down, or saved for later. It isn’t always smart to split out the roles and blow your budgets or headcount. Prioritize, and keep in mind that wireframes and visuals usually aren’t the biggest levers if you’re trying to improve a user’s experience. If I had to pick, I would focus on getting user-centered problems researched and an effective persona created, and then shift into information architecture now that you have a rational basis.

The best work comes from ensembles. This is a collaborative and cooperative line of work. For companies or projects that need to get a UX base established, hire a few generalists. People who know how to wear each hat, and can pass the ball from one to the other. Look for people who care about what they do first, level of skill second. No matter how you want to approach it, know what the hats and what they mean. The purpose of UX is to ultimately solve business and human problems. Know which problem you’re trying to solve, and which UX hat targets what you need.

Sitting on the other side of the table during a UX interview is a very different experience. I don’t see a lot written from the personal perspective of the UX interviewer. There are generalized guides and how-to’s, but no actual real-life accounts.

That is what this article is about. I wanted to write something with some personality and heart. So here it is; my experience over the last 15 months in interviewing dozens of UX candidates, and eventually hiring (two) Sr. level co-UXers that work with me as peers.

A personal take

Recently, more than a few articles have popped up concerning “what to do, what not to do, 5 biggest mistakes, one cool trick… etc etc.” The problem I had with these articles was that they were stale 600 word editorials that didn’t really provide anything interesting. The same boilerplate advice meant to generalize out to as many companies or candidates as possible. They were written from an anonymous, 3rd party perspective where there was no human voice, no empathetic POV for the reader to relate to.

This is all just my personal take, it’s not a general guide or a how-to. It might provide something that helps you directly, and it might provide some things you disagree with and don’t like, which still helps you to clarify your own goals and preferences. Either way, I hope it’s not just another boring collection of things you can read anywhere.

Before we begin, know I am not a hiring manager, I just brought my chosen candidates to the review committee.

• I am not in HR
• I am not a recruiter
• I don’t sift through hundreds of applicants a day
• Some of these notes might actually hurt you in some interviews
• My take is biased, personally skewed, and not at all a “how to” guide.
• I am just a UX person who desperately wants to hire people that care about they do.

My “What not to do” List

Over the past 15 months, I had the chance to have two separate job postings open, around 6 months apart.

Each time, there was probably 50 resumes submitted. Being that UX is a fairly specialized and nuanced role, I had the HR recruiter send me every candidate that came through; there was no way to explain what we were going to be looking for.

As the resumes came in, we looked at them usually within the same day. We had a system we went through first – the initial disqualification round. This is necessary, a lot of people don’t even try, or they just apply for every job with UX in it whether they are remotely qualified or not.

I will always put as much effort into reviewing an applicant as they appear to have put into preparing or submitting materials. I believe in being fair. But like the Russian Police, that first look at a resume has to be a stern one. Stern, but fair.

First Impression – The Resume

The email is forwarded with a resume attached. I drag it to the desktop and hit spacebar to preview it. Here are some instant DQ’s:

• Unattractive Resume. This was the first thing we look at. If there is no sign of effort or good-intent to make my viewing of the resume a positive experience, it is an instant no.
• Word Documents. Just don’t. Word has a “save/export as PDF” feature. Word is a composition tool, not a presentation tool. Plus, using Word isn’t always a good experience for me as the reader. Do you really want to leave the presentation layer of your first impression to each persons individual install of Office? Also – I think people forget that when a Word doc is viewed, all the little red and green squiggles appear under spelling or grammar errors, and since most of these jobs have a lot of tech skills, all the strange words and acronyms appear misspelled. Just ugly.
• Margins. This is one of those intangibles that has so much hidden meaning to me. If your resume has small margins, or the same margin around the whole document, it just feels lazy. It doesn’t have to be graphic-art, but you’re interviewing for a role where your work will eventually be what a user sees and feels. Empathize with who you are sending your resume to.
• Length. I do not, and never will, care how long your resume is if it is relevant info. If you want to include your resume as the first few pages of a PDF portfolio, even better.
• Cover Letter. If you want to write something specific, send it. If you have a reason you want to work at this specific place, mention it. Otherwise, skip it. If it doesn’t say something beyond what we already assume – that you want a job – what value does it add?
• Visually Designed Layouts. If you want to do an actual layout that has considerable visual design work done to it, great. Delight me. Times New Roman does not delight my eyes or brain. If your layout is not annoying and adds to my experience, that’s a plus. Why? Because imagination and greatness only come from risks. Don’t be as flavorless as possible for fear of rustling the jimmies of a prospective audience.
• Don’t have a data visualization of your skills! Showing a graph or chart of a bunch of skills, with a few that are far lower than the rest is always a bad idea and should be nuked from orbit. Never do this anywhere.

Second Impression – Portfolio & Material Review

With the resumes we didn’t instantly delete, it was time to check out any material you submit.

Portfolio

A UX portfolio is a hard thing to put together. A lot of work is confidential, proprietary, or just plain private. I get that more than anyone. If you’re going to submit a web or PDF portfolio, here’s what I would always be wary of.

• Showing Final Designs Only. Visual design is awesome, and potentially a big part of your job. But it shows me nothing of your process; techniques, methods; innovations. I can’t see if you have an analytic or abstract though style. I’d prefer to see how you arrive at something. Even if you have to make a fictional example project or IA example, at least that shows me your inner though processes.
• Dribbble, Behance, DeviantArt, etc etc etc. Please don’t send me to a site 3rd party site as the only option. Just do the PDF. Even if you just drag and drop the same images from the 3rd party site. Otherwise, suddenly I forget where the email is with your URL, or I want to view it on my phone and their mobile experience sucks, or as in a real-life case, Behance was down!
• …In regards to the previous bullet. I have to send your materials to upper management and they have never heard of these niche sites. I’ve had to give people’s Behance (or whatever) to Sr. Executives who have no idea what they’re looking at. “Is this their website? Why are the pictures so small? The URL didn’t work. Why is the name different?” Once, when a candidate sent a Dribbble profile, my boss clicked and clicked the thumbnail, and when I told him “those don’t enlarge,” he looked at me and said “This is how people want to present their work?”
• Current examples. It can have old items, but don’t send me a “Last updated July 2010” collection of examples.
• Sending nothing at all. Send something.

Personal Website

• It’s good to have. It’s 2013. Personal websites aren’t hard to build. Domains are $10.
• Make it non-terrible. It doesn’t have to be the best thing I’ve ever seen. Far from it. If you’re not a web designer and never have been, make it simple, clean, and follow the easy best-practices of small websites. A bad website is such a bad sign.
• Show Examples. Have your examples and portfolio up there. Maybe some link to live sites or apps. A personal site is a great place to maintain complete control over what you say and show.
• Include links to relevant sites. Your Dribbble, GitHub,  Linkedin, Twitter, etc etc.
• Again… Don’t have a data visualization of your skills! All this says is “This is what I suck at” and makes you look like you have shortcomings you felt necessarily to highlight. How does that help you? Especially if it isn’t a direct job requirement. Don’t put “HTML/CSS” at a low state if that’s not an integral part of the job. And if it IS an integral part – why are you applying for a job where your weak skillset is a liability to you?

Third Impression – The initial meet

If the first phases went well, I’d want to talk on the phone or in person ASAP. My personal goal is to rule people in, not rule them out. I want to attract as many people with strong potential as I can, and the quickest way to do that is by talking. It’s not an interview yet, I just want to make contact and get a sense for each other’s personalities.

Bad Signs

• Low energy. I am a UX practitioner who loves what I do with all my soul. When people have low energy or seem to just treat this as a job, it brings the conversation down.
• Not speaking to the different aspects of UX. Know what they are, what they mean, why they are important. Dominate the conversation with UX in-depth discussion.

Good Signs

• Talking about methodology. It’s always real clear when someone is speaking from a place of genuine interest and knowledge, as opposed to when they are trying to use the right terms and topics but don’t really have it in their blood. Take control of the interview and start writing your process down on a whiteboard.
  
• High energy. This is a personal thing. But I want people to be fired up. Care about what you do. It doesn’t matter if you’re super advanced or a beginner, you can still have a deep investment in your work and the time you spend on it.
• Give me the realtalk. Lay down the law. Tell me why things work and why they don’t. You’re a professional. If I’m trusting you to go and fight the UX battles against bad design, bad experience, bad ideas… diplomacy and compromise will not always work. If you don’t think it’s a good experience for the user, advocate that and don’t give up your principles.
• Be direct about what you want. Never, ever say you’re “willing to do anything” or “whatever is needed.” If I ask, genuinely, what you want to do here – tell me.  None of us get our exact dream role, but having conviction for what you want to do is way better than just being a UX Roomba. Not sure what to say? Say “I want to kick some ass on your UX problems and crank this place into high gear.”

I do have one question I ask that is more about how a person responds. The details of the answer aren’t super important.

It goes “We believe in getting people the hardware they need. Tell me what we’d need to buy for you so you show up your first day and can just start.” Don’t say “just whatever” or “I can work on anything, I’m flexible.” Do you want a Windows box? Linux? A Mac? Do you need dual 27” screens? A big Wacom? What sort of keyboard? Mouse? Laptop? Desktop? Solid state drives? 16 gigs of RAM?

I’m not trying to burn money or just indulge in “geek toys.” This is a serious job and every second you’re impeded by hardware is a second wasted. Plus, I like to know that people have preferences and that things that matter to them. Even if certain hardware isn’t feasible, at least you spoke up. It also let’s you know your prospective employer’s view on investing in new hires.

My current CEO said to me during my interview, “If you’re working at a place that won’t get you the tools you need, you don’t want to work there.” That’s truth.

Why my current UX partners got hired

After many months of interviewing people, I find finally was able to hire a peer, and then he and I repeated the interviewing process for a few more months. We eventually hired a 2nd peer. Here are the highlights of why myself, my boss, and our company chose them:

• They spoke on the UX topics without hesitation. They weren’t repeating things they’ve heard, or talking “around” UX like it was a book report.
• Their first-impression materials were on-target. I ruled-in one of them on a first impression based on a single thumbnail of a wireframe. The other I ruled-in from the custom design and layout of his UX documentation he used at his previous job. It just had that intangible something that like-minds can just feel. Intuition is a big part of this.
• They told me what they would do. Not passively, but literally told me what they would do here, making clear “Look, I know how to fulfill a UX role, and here’s how I would do it for this company.”
• They cared more about doing good UX work than getting this job. You could just tell that their tools were sharp, but the tools belonged to them, not their current employers or me. They can take them anywhere and create great things. They didn’t need to be instructed on how to do the job.

But most importantly, they didn’t give rote answers my questions. They listened, and then educated me on the relevant topic. It was like I was the university student in the crowd asking a question, and they were the tenured professor at the front of the room spreading education. Do you see the difference? Answer as the professor, not as the nervous job applicant.

Oh and I guess they had experience. But experience isn’t what excites me. Lots of people have experience. And lots of people have 10 years of experience in repeating the same year 9 more times.

Don’t be a rockstar ninja lean agile UX designer.

Smart people hire a person, not a work history. They ask “What can you do for me in the future?” I’d take a newbie with potential over a veteran who doesn’t seem excited. Your career history and past accomplishments are good, but remember; I’m hiring a person. I’d be more prone to hire someone that isn’t an exact fit for the role, but has too much potential to pass up.

People can learn to “do” tasks. But you can’t teach people to care.

Contacting the spirit world is not something to be taken lightly. You never know who is waiting on the other side. It is always best to have a licensed Medium there, or at least someone with an official Hasbro trademarked Ouija board. The last think you want to do is have your faulty seance equipment crap out on you just as grand-pappy was about to tell you where to find the buried gold. That is why when you Ouija, you want to be damn sure that you can understand the UI with which the spirits use to communicate with you! But before we get to the point of this post…

The UI of a Ouija Board

Did you know that the little thing you move around on a Ouija board, the thing that shows you the letters the spirits are trying to call out to you, is called a planchette?

a small board supported on casters, typically heart-shaped and fitted with a vertical pencil, used for automatic writing and in seances.

The planchette has a little window that you see the letter through. No ambiguity there – whatever you see through the window is what the long dead spirits are trying to show you. A great oUIja right? I didn’t know what it was called until I set off with my friend Shaun (the programmer) to design this new kind of toggle we eventually called a Ouija Toggle, based on the idea of a viewable little window.

What the world needs is another new web toggle

If you want a fancy toggle for your website or web app, there just aren’t enough options…

Well, maybe that isn’t true. There are all sorts of styles and implementations. Some are pure CSS, some are javascript. Some you can only click, but some you can slide. Some you can click or slide, and it even works on a touchscreen. Some are animated, some aren’t. There’s really no standard way to do this. And some might say, no good way…

But that didn’t stop us from making one this weekend! Back in November, there was a Hacker News posting by Chris Norstrom about iOS style toggles. About halfway down, he talks about these slider toggles that instead of having the label move with the switch, the switch has a window in it and moves on top of the labels.

At the time, he didn’t actually have a working code model, but we wanted to try it. We built it in a jsfiddle real quick, and that was that. I wanted to use it in a few projects, but we only had the most rudimentary prototype and no real time to flesh it out. Now, probably 2 months later, we have a project that needs it, so we decided to build it out for real.

Our answer: The Ouija.js Component

Here’s our implementation. Let’s be real clear – I did none of the actual programming, Shaun did. I just did the styling and helped with the idea. It’s all written to be a javascript component that can be integrated into a project easily, and then just called and tied to simple <select> inputs. Unlink many other similar toggles, we don’t use a checkbox. We wanted the option to have more than just a single boolean option. This uses a little more code when you want a on/off option. You have to use a 2 option dropdown. For now, we’re okay with that.

Here’s what it looks like… we didn’t reinvent the original look that Norstrom had in his post.

That’s all there is to it. You can click on the window itself to move to the next option, click on the label to move to the option, or drag the window with your mouse. If you’re on a mobile device, you can drag or tap just like normal. Go try it right now.

How it Works

The implementation of it is very simple. Instead of trying to get all crazy with it, all it does is act as an illusion on top of an existing <select> input. So anything that the select has in it, or any events it is tied to, all work the same way in the Ouija form factor. Since it is just in sync with the select input, you can have the select tied to events reliably.

<select class="ouija words" style="display: none;">
    <option value="Cow">Cow</option>
    <option selected="">Rabbit</option>
    <option>Goat</option>
</select>

Multiple Values

Adding more than 1 value is easy, you just add more options into the select input:

<select class="ouija borderThickness" style="display: none;">
  <option>1</option>
  <option>2</option>
  <option>5</option>
  <option>10</option>
  <option>20</option>
  <option>50</option>
  <option>100</option>
</select>

You can drag, click, or click on the active element to move through the options. The UI is all CSS so customizing it however you want is easy.

What problem does it solves?

The first problem it solved was something for us to do on a Saturday.

As far as its merits as a UI; I haven’t tested it out with anyone yet. Part of it was just the fun of dragging the little planchette window around. It’s easy to tell what is selected; the blue one with the box around it. Is it more clear than the traditional style toggle implementation? I don’t know. Maybe now that I have the javascript component to use in projects, I can get it some real world investigation. Or maybe I can just use it to consult the spirits. I am but a vessel. 

Check it out, in both senses of the word

If you want to see the example again, it’s right here @ http://shaunxcode.github.com/ouija/. If you want to view or branch the source on GitHub, please do so here @ https://github.com/shaunxcode/ouija/.

Please give us some feedback on what you think. It’s written in coffeescript if you want to branch it. This is just a toy right now, but there are places I want to use it where it could make sense. But in the end, it’s just another UX via UI exercise to see what happens. A rapid experiment.

Credit to Chris Norstrom for giving us this idea.

Listen, and understand. The mobile users are out there. They can’t be bargained with. They can’t be reasoned with. They don’t feel pity, or remorse, or fear when they disregard and leave your unresponsive website. And they absolutely will not stop, ever, until your mobile experiences are good.

Whoops! I meant take a look at this picture: At the end of 2011 Horace Dediu compiled some data on the marketshare of various computing platforms. Desktop computing is at around 50% market share, the other 50% consists of:

• Android
• iOS

As we enter 2013, I would love to see if the distribution for 2012 has moved even more towards the favor of mobile devices. The odds of someone visiting your site on a mobile device is growing as casual internet usage move farther and farther away from the desktop. The potential for visitors to be on a mobile device is getting stronger every day. The point is: the mobile users are coming.

Responding with Responsive

As I venture through the social banter about UX and web design, I hear a lot of discourse about responsive design. I am a firm believer in having the viewed presentation layer be separate from the content and business logic behind it (similar to MVC). For me, this translates into having a site be responsive to the viewport size of the device. This is not a specific mobile version of the site on a subdomain, or something that reads a user agent and serves up a different site like m.helloerik.com. Alternate mobile sites are a whole different topic.

As Simple as it gets

Responsive sites rely basically on a certain aspect of CSS: @media queries to detect the viewport width and serve up different styles accordingly. If you’re not a HTML/CSS pro, or haven’t done this before, it can be very difficult to know what to do. It would be almost impossible if you didn’t have some sort of CSS framework to build it on. And THAT is what this blog post is about.

Responsivize with Bootstrap

Let’s get this out of the way – I am a bootstrap fan. It’s changed my workflow as a (former) web designer and (current) UX engineer. I’ve spent 17 years designing sites from Photoshop to HTML and then helping wire it up to the functional code. But not all UX people came up through web dev, and don’t implicitly know HTML on a in-depth level. Fear not. Bootstrap is here to save you.

They weren’t the first to create HTML/CSS bases like this, but it’s the one I choose and it has grown incredibly popular all over the Internet. If you want to get in to HTML prototyping, there’s never been a better time to learn. Bootstrap is a collection of CSS classes and attributes that sort of sets the stage for you. It’s not actually a “design” template by itself. It just gives you the HTML and CSS tools that you normally would have to build over and over and over again.

There is a lot of documentation at the Bootstrap site on all the intricacies and capabilities, so I won’t rehash those here. What I want to do today is a little “learning by doing.” I hope to help you get started with this little sample page so you can view the HTML and see the code here in the post where I’ll detail exactly what I did to create this. It’s not a complex example, but I hope you can take it, copy it, or start from scratch.

Let’s Get Started

First, get this installed: RWD bookmarketlet. It’s a little browser extension that will allow you to change the viewport size right in your browser without having to send the URL to a 3rd party site, or having to squeeze your browser down manually. Here is the page that I’m going to be explaining: Responsive Example Page. Open up that link in a new tab and view it with the RWD bookmarklet.

It’s a very simple design. I’ve added a little colored status bar at the top that indicates which version of the responsive styles are currently active. If you use the RWD bookmarlet to view it, you can easily see what happens when the viewport changes size. That’s the key to a responsive design as opposed to a dedicated mobile design.

What Is Actually Happening

Inside the CSS, there are special things called “media queries.” For our purpose, it’s a very simple concept, they just say “Hey, when the browser is smaller than whatever number you want, say 940 pixels, I’m gonna detect that and serve up the styles that are inside of me.” It only applies the styles that are within the @media container braces {}.

Here’s a dead simple example; You have a site where the text is 20 pixels tall on your regular desktop version, but you want it smaller when viewed on a mobile device. You want it 10 pixels tall and you want the red background to stay the same in either case. Here are the 2 CSS classes to do that. One is a container that has a red background, and the other is a class that sets the font size to 20 pixels tall:

.your-container {
	 background-color: red;
}
.your-text {
	 font-size: 20px;
	 color: #ffffff;
}

Here is how it looks:

When you want to make that text size adjust when it is viewed in a narrow mobile viewport, you have to add a @media query now to let it know when to change:

.my-container {
	background-color: red;
}
.your-text {
	font-size: 20px;
	color: #ffffff;
}

@media (max-width: 767px) {
	.your-text {
		font-size: 10px;
	}
}

And with this @media query in action, here is how it would look:

So when the width of your viewport is below 767 pixels, that @media query is going to go “okay, now I overwrite the .your-text style and apply my version of the style instead!” That’s the very basic way of how the Bootstrap version of responsive design works. You don’t need to use Bootstrap to do this, but they have set up their grid and CSS to make this very quick and easy. Let’s take a look at that now.

The Bootstrap Grid

Now that we saw the basic function of @media, we need to go a little deeper. This is where Bootstrap does the heavy lifting for you. Doing this manually with HTML and CSS if you’re not super familiar with it would be a very frustrating experience. I don’t recommend it unless you really want to learn to reinvent the responsive HTML container wheel.

The Bootstrap grid is the core of how it does HTML layout. It’s a dream when building a traditional width page, but it’s also set up specifically with responsive designs in mind. The grid would take more time to explain that I think people want to spend here, so I’ll try to give it the most basic summary to get you through the example.

The Container: Bootstrap wants you to set a container as the outermost holder of all the sections within. If you were to envision your HTML as containers, it would look like this:

The HTML:

<div class="container">
<!-- nothing here yet... -->
</div>

You have to use a container around your structure. There are technical reasons for this, but don’t worry about it now.

The Row: Inside the container, you have to put rows. No actual content actually goes inside a row. Multiple rows stack on top of each other to create horizontal divisions. As we continue to envision the page, adding a row would look like this: The HTML

<div class="container">
  <div class="row">
    <!-- Stil nothing here yet -->
  </div>
</div>

Spans: Spans are how we actually setup the layout of the page, They hold the actual content. They are the things that facilitate the responsive design.

The size of the span is determined by the class you give the div. Bootstrap uses a 12 column system, which simply means that it expects the spans to be any width from 1 to 12 “spans wide.” When you have a row, you fill it with spans that add up to twelve.

If you wanted two halves, it would be a .span6 and a .span6. If you wanted a thin sidebar you would do a .span2 and a .span10. That is what makes up a row.

Let’s take a look visually. The following is the most basic example. We have a container, a row, and then a .span12. The span12 does just what it says, it spans 12 columns, which gives us the full width of the page for this content:

the HTML:

<div class="container">
  <div class="row">
    <div class="span12">

    </div>
  </div>
</div>

That example has a .span12 class assigned to it, so it takes up all 12 columns. But if you wanted to divide it up into two sections, one 3/4 wide and the other 1/4 wide, you would have the first be a .span8 and the second a .span4 so they add up to twelve: The HTML

<div class="container">
  <div class="row">
    <div class="span8">

    </div>
    <div class="span4">

    </div>
  </div>
</div>

Time to build a page: We’ve got the start of a page going with the examples above. Let’s flesh it out with a couple more rows of content, and then a footer. The way we add those are the same as above:

• When you have a row, you get 12 span units to fill. In our first row, we used all 12 at once
• Now, we want to add 3 more rows. One with 2 sections, another with 3 sections, and a final with 1 section.
• We want our 2nd row to be split between 4 and 8 spans
• We want our 3rd row to be split between 4, 4, and 4 spans (thirds!)
• And the bottom row should be a full 12 span width to act as a footer

Don’t let this intimidate you – we’re just repeating the same thing over and over: And the HTML:

<div class="container">
  <div class="row">
    <div class="span12">
      <h1>I am the title in an H1 tag!</h1>
    </div>
  </div>
  <div class="row">
    <div class="span4">
      This is the span 4 content
    </div>
    <div class="span8">
      This is the span 8 content
    </div>
  </div>
  <div class="row">
    <div class="span4">
      This is the span 4 content
    </div>
    <div class="span4">
      This is the span 4 content
    </div>
    <div class="span4">
      This is the span 4 content
    </div>
  </div>
  <div class="row">
    <div class="span12">
      And I'm the footer content!
    </div>
  </div>
</div>

At this point, you would have a responsive structure just like the one in the example link. I added some styles and colors in the example so it was easier to notice, but that was all cosmetic. The responsive nature is all accomplished with just the code above that uses Bootstrap’s responsive styles. Part of the beauty of Bootstrap is that you can get started with this instantly. Take a look at the example link again, and compare it to the graphic. You should see how it’s the same layout. You can even use the RWD Bookmarklet to shrink the view port and watch it collapse down to mobile sizing with nice animation.

How the Bootstrap Responsive Grid Makes it work

When you have the responsive option enabled in Bootstrap, it enables 4 different layouts by default:

• A normal layout
• A wider than normal layout
• A smaller than normal tablet layout
• A flexible layout meant for phones/narrow tablets

If you make your browser really wide, you can see in our example that it does go a bit wider, back to normal, and then a bit smaller. Of course if you squeeze it down, it flips over into the mobile layout. Try this out on the example page and notice the colored status bar in the top.

How the Responsive Grid Changes: Here is how this works. Bootstrap first looks at your .containers and treats those as a unit. It moves in a level, and looks at the rows. Rows stack on top of each other already, so moving to the mobile layout doesn’t change them much. But here is where the magic happens. The spans are meant to go side by side, adding up to 12, remember? But once you hit that responsive dimension in the @media query, Bootstrap takes those spans and stacks them by making them all 100% the width of the much narrower row! Like this: That’s the responsive version of the same design we built above. The important thing to realize here is there is no new HTML. Bootstrap handles the CSS re-arrangement by default. And just like that your content and site are now oriented vertically and ready for mobile consumption.

Note: Bootstrap assumes that your content importance goes from top down, left to right (This can be changed, but that’s a bit more advanced).

The endless Nuance of Responsive Design

As you build a responsive site out, there are endless ways to customize it. When things start to get complex, you will find yourself adding all sorts of styles inside the various @media queries to change the layout to suit the mobile needs. At a certain level of complexity, JavaScript and other web languages play a big part in building a big responsive website or browser-based app. The example here is just a narrow view into how something could be prototyped or tested.

As a matter of note, this site uses Bootstrap for its HTML and CSS base and is fully responsive. The content manager is WordPress, but I gutted it all out and re-wrote the theme with Bootstrap, basing it on the Hybrid Core theme framework. The design and layout of the site is all mine, but Bootstrap controls the responsive elements and core CSS.

Give it a try

If you want to give it a try with the Bootstrap source itself, or if you just want to fiddle with my example, download them both with the links below. I have put HTML comments all throughout the sample file with the hope that it can be easily understood and edited or expanded. And please post any questions or comments you have. I love this stuff, and am excited to help people out and learn more things myself. I hope that there was value in this little example. Let me know in the comments if it helped!

• The example ZIP for this page
• The hosted example
• The official Bootstrap page
• Wikipedia on Responsive Design
• Wikipedia on MVC architecture