OakenDoor Animated Logo

Experience Design

This page is dedicated to information concerning the thinking, implementation approach, and considerations of Experience Design. These include, but are not limated to:

What is User Experience?

You might be asking yourself what is User Experience? You have the overall concept, but what are the finite aspects of experience design and why does it matter? Good User Experience means that the people using a product or service can do so quickly and easily to accomplish their goals with a sense of joy; and experience design can be part of any product or service, from Software, Mobile, and Web design to how factory workers accomplish their tasks productively. The definition rests, conceptually, on the following four points:

  • User Experience means focusing on users.
  • People use products and services in the hope that the product or service will be a helpful tool to accomplish a desired goal.
  • Users are busy people trying to accomplish tasks. Complexity is not the name of the game.
  • Users, not designers and developers, decide when a product is easy to use, and more importantly - useful.

How are these four points accomplished for your product or service? To answer that question, I must implement one or more user research practices in your and your clients' environments. That means understanding business needs and goals, and also understanding how those align or contrast with user goals. The following two points provide insight into the costs of not implementing User Experience and the benefits of contacting OakenDoor to engage your user community in a more meaningful and joyful interaction.

  • Redeveloping after market goals are not attained is very costly and often damaging to a developing company. Performing quality research and analysis of user needs before development yields greater returns on investment. The needs and intolerance of the user community are causing the elimination of many ambiguous and tedious "company strategies" and calling for the growth of useful, problem-solving, highly-deliverable information to accomplish goals. Conceptual ideas and development can have the best intention of meeting perceived needs, but the user decides in the end whether the product or information is useful.
  • User Experience (UX), Interaction Design (IxD), Information Design, or whatever definition rests in the moment is the key to the future prosperity of any product or service where user interaction is involved. You can learn to zero in on what you need from a UI, for example, by following User Experience principles outlined by me and by engaging me to make sure that all facets of user experience implementation are detailed and addressed.

[ Top ]

Designing for Mobile

Mobile Web and app UX design is much the same as Experience Design for software or Web sites. The creation of cognitive workflows that inspire users, allow them to accomplish their goals, do not create frustration, and do create joy are all still integral to a company's success. Obviously though, device interaction and capabilities are vastly different. There are many new challenges to be considered.

Constraints of mobile (there are many):

  • Form factor
  • Network latency
  • Input mechanism
  • Memory
  • Computational power
  • Battery
  • Context

Single early failure equals a non-returning user, and there is a window of 30-60 seconds during the initial usage that is critical. People have even less tolerance than in a Web-based environment. That's a basic tenant of any cognitive psychology analysis though; tight spaces produce greater and quicker frustration in an individual.

Also, the environment differs, depending on where you are. We can look at factors like user behavior, handset range, operators, data allowance/pricing.

Presentation within these constraints points toward delivery that is like snacking, essentially "data snacking". Present small snippets of info, and as stated - recognition, focus, and joy must be created in the user in the first 30 to 60 seconds. Make the interface simple, but repetitive. Also, making it "regular" is key.

There should be a focus on leveraging archetypes by considering current behaviors. For example, re-use interactions inherent in the device, minimize the number of surprises, greater weight on color selection, menu navigation - and finally, where applicable - tone of voice.

Obviously sizing and positioning are a factor, but it's not about specifically making things smaller. It's not miniaturization, but rather mobilization. Fewer options produce a simple more effective interface and polish makes an app, and of course the user experience, stand out more. Standing out in a mobile context though is about subtlety.

[ Top ]

Color Psychology

Everyone is familiar with color, yet it is difficult to define the true impact of color on eye, brain, and mind. Although color is very real and concrete, we are compelled to reach for abstract terms when we want to grasp its inherent nature.

We talk about color when we have a particular sensation of the brain, caused when light radiation of a certain wavelength reaches our eyes. This definition is built up from two parts that are respectively quite different. The first one is of a psychological nature. It deals with the way the sensation of color is processed by the mind. The second one is merely the eyes detection of physical radiant energy. So, color is in fact a psycho-physical phenomenon. It interrelates both a psychological and physical process.

Artists and designers have a wealth of knowledge concerning the complicated interaction of color: how colors are affected by the environment in a composition; how they can create harmony, contrast and rhythm. Color can be talked about in subjective terms: hue, saturation, and brightness. The terms hue and saturation are collectively referred to as the color's chrominance. The hue of a certain color is its intrinsic nature. When we observe a colored surface, hue is that attribute of visual sensation that makes us say a surface is red, or green, or whatever color.

The saturation of a given color is expressed in chromatic color intensity. A vivid color is highly saturated, as opposed to a pastel color of the same hue and with the same brightness. The colors of the rainbow have the highest saturation a color can ever have, whereas the complete absence of saturation results in a shade of neutral gray, regardless of the hue. The shade of gray depends upon the brightness. Brightness relates to the sense that a color appears to be reflecting more or less light energy. We talk about bright colors, in contrast to dim colors. Black is the complete absence of brightness for any hue. Every horizontal cross-section of the cone is a color wheel over which the different hues are spread The highly saturated colors are located on the circumference of the wheel. Moving along the radius towards the center of the wheel, the saturation of every hue decreases, with a certain shade of gray as absolute minimum. The brightness, at last, is represented by the height of the cone. The apex corresponds to the absence of any brightness, thus black. The base of the cone is the color wheel that corresponds to the highest possible brightness.

How Can I Get My Interface to Look Better?

Following is a list of tips to help you improve the look and feel of a interfaces:

  1. Use fewer colors. A limited palette is a good palette. Think of Coca-Cola - a powerful graphic with very few colors. The most potent colors are red, black and white. Red in particular seems to work as a retinal trigger (in our culture, red causes us to stop, be alert, and take notice), while white is a readable background, and black the most readable text color (later on I discuss the importance of choosing a font based on the type of media delivery). The Coca-Cola logo is red, black, and white. Is this a Coincidence? Ultimately, you can choose any colors you like; just understand that, the fewer you choose, the more your page will cohere. If you build your color palette from the 216 web-safe colors, that's a plus, since your page will look better on most computers. (Lots more on this below.) As a bonus, .gifs rendered in the same color palette will generally load faster and will not dither on most machines, even low-end machines. Using a limited color palette can also help unify your entire site. Look at most good sites and you'll see they stick to a few well-matched colors.
  2. Use a few images well rather than many images randomly. That goes double for animations. If you throw pasta at the wall, some of it will stick - but the result is a sticky wall.
  3. Use a few images well rather than many images randomly. That goes double for animations.
  4. Less is more. Tread lightly with animations, scrolling text, java clocks and other gizmoids. When you learn a new trick, the tendency is to throw it into the mix. Fight that urge! I add a lot of animation and scripting to my site because I want people to see my diversified talents in designing Web pages (just in case you want to hire me).
  5. Match your interface colors to the colors in your images. The result will be a more coherent page. If you're creating everything from scratch, color matching is pretty straightforward. If you're working with images you did not create (For example, images from a client; or digital snapshots from a road trip.), you can use any number of programs from Adobe or freely downloadable graphics programs that contain the "eyedropper tool" for selecting the color from an unknown color source.

[ Top ]

Definitions

  • User Experience: The qualitative emotional description of multiple interactions with an object.
  • Interaction Design: How the user interacts with an object.
  • Information Design: Delivering text, images, video, and sound so that stories are told with efficiency and effectiveness.
  • Usability Testing: A technique used to evaluate a product by testing it on users.
  • Information Architecture: The art of expressing a model or concept of information used in activities that require explicit details of complex systems.

Downloadable Whitepaper

Making Color Choices for Web sites (PDF)

Color Wheels



©2020 OakenDoor. All rights reserved. No copying or sharing.