Tuesday, 29 April 2014

Communicate Efficiently By Reducing Realism - Vanseo Design

Communicate Efficiently By Reducing Realism - Vanseo Design

Communicate Efficiently By Reducing Realism

Posted: 28 Apr 2014 05:30 AM PDT

The world around us contains a lot of visual noise. It’s great to see, but all that visual information has to be processed even the parts we’re not interested in. You can help speed processing by removing noise and reducing realism.

The last few weeks we’ve been looking at visual perception and the design principles that arise from it. Today’s agenda is about how reducing realism can speed visual processing and improve comprehension.

As I’ve mentioned a few times, this series comes mainly from the book Visual Language for Designers by Connie Malamed.

A silhouette of elephants at a tree

Simplicity Speeds Processing

You have the option with every graphic you create and every site you design of choosing an aesthetic somewhere on the scale between hi-fidelity photorealism and a lo-fidelity abstraction that lacks details and realism.

Which is best depends on the message you’re trying to communicate and the characteristics of the audience you’re attempting to reach. As you can guess from the title of this post, we’re going to focus on the lo-fi abstract here. There are some good reasons for using graphics with reduced realism.

  • They lead to quicker comprehension
  • They strengthen the impact of a message
  • They focus attention on the essential details
  • They’re useful in giving explanation to beginners and general audiences

Because there are less details to take in, reducing realism leads to more efficient visual processing. Less details make it easier to find and process important information. Less information to process means less information needs to be held in working memory, which leads to less cognitive load.

People can identify objects in line drawings as easily as they can identify the same objects in photographs

Irrelevant information that might otherwise delay processing is removed. The data becomes easier to process and integrate with data held in long-term memory.

When our eyes first look at a graphic we scan it for primitive features and then for complex information. When designers reduce realism much of the complex information is removed. That makes it quicker and easier to find the primitive features.

Our brains do some of this anyway. They remove the non-essential in order to focus on the essential and they store minimal representations of the information taken in. By reducing realism in our designers we’re complementing the natural process.

Because we’re removing details, the primitive features we choose to emphasize have greater impact on the message being conveyed. It’s important to choose how many and which features to emphasize as well as how much emphasis is given to them. Some details are less realistic than others.

  • Hard shadows are less realistic than soft shadows
  • Smooth surfaces are less realistic than rough surfaces
  • Sharp contours are less realistic than transitions
  • Geometric shapes are less realistic than natural shapes

How to Reduce Realism

Reducing realism in a design is a process of selective abstraction. You focus on the essential message and remove extraneous details that don’t contribute to the essential. The end result is an idealized version of the real thing.

Viewer’s fill in missing details from prior held information. They’ll fill in the details from the schemas and mental models they hold and use those details to help recognize what the idealized versions represent.

How might we remove details?

Remove Visual Noise

Reality isn’t perfect. I’m sure you’ve learned that by now. Our visual environment contains dirt and scratches, dust and smudges, and all sorts of imperfections. Removing these imperfections from an image leads to the perception that the image is less realistic.

Adding imperfect details adds realism, but also distracts from the message. When visual noise is present a person may focus on unintended patterns. Accidental patterns and inessential details make the essential and meaningful harder to find. By removing visual noise we increase the signal-to-noise ratio of our design.

A few things to avoid if you want to stay away from visual noise include:

  • high-contrast surface textures
  • gradated regions of color
  • illusions of depth
  • detailed or patterned backgrounds

We can minimize visual noise by reducing extreme variations in textures, by using flat and uniform areas of color, by using less shading, and reducing any interference from backgrounds.

Use Silhouettes for Quick Perception and Comprehension

A silhouette shows the form of an object through outline, shape, and a uniform color. There is no detail otherwise. The shape of the object is enough to recognize it. When the silhouette is a faithful representation of the object it leads to quick perception and comprehension.

Shape, gesture, and context allow you to create expressive silhouettes even with the lack of detail. It becomes the visual equivalent of a generalization and conveys the sense that all objects of a type are represented by the silhouette.

Because they have few features they can be hard to perceive at times. It’s possible the shape is difficult to distinguish from its background making it difficult to determine figure/ground relationships.

You can help in figure/ground recognition by keeping backgrounds simple and formless. Don’t allow negative space to encroach on the silhouette. You can also decrease the size of the silhouette as smaller objects are typically seen as figure.

Use Iconic Forms for Faster Communication

Iconic forms are more than shape and contour. They can use features such as lines and color to capture essential characteristics of objects and concepts. Icons are highly distilled and stylized representations of something.

The meaning of icons must often be learned or deduced and many are culturally dependent. Once learned, icons promote cognitive efficiency. They minimize visual processing and their meaning tends to be more memorable.

Context is a strong contributor to the meaning of icons. For example several concentric curved lines could represent a rainbow, wireless service, or an rss feed.

Some iconic forms resemble objects and have meaning. Others have an associative value and are considered symbols. Interaction Design Professor, Yvonne Rogers suggests a system for user interface design that categorizes icons by how they depict the concept they represent.

  • Resemblance icons — are direct likenesses of the objects they represent. (camera icon for a camera app)
  • Exemplar icons — depict a common example of the class of objects they represent. (trowel and rake to represent gardening)
  • Symbolic icons — convey a concept at a higher level of abstraction than the object depicted. (cracked wineglass to indicate something is fragile)
  • Arbitrary icons — have no relationship to an object or concept and their association must be learned. (computer on/off power button)

Icons quickly communicate and are easily remembered. They work well for things like maps and signs were quickness of understanding is important and for reference material where remembering is important.

Use Line Art to Evoke Closure

Our brains can quickly determine linear features in an image, design, or scene. When scanning an object most of our visual activity occurs at the edges or contours. This suggests an outline is enough to convey meaning.

We can reduce realism through line drawings that focus on an object’s outline. With just a few line strokes, a bit of tonal value, and depth cues, both shape and essential details can be communicated.

The gestalt principle closure tells us that when we look at an arrangement of individual elements we look for a single recognizable pattern made from all of them. We organize the individual lines into whole shapes.

Line art appears simple, but can communicate a great deal of information. Lines are good at depicting the human figure and work well for technical drawings or explanatory graphics. They provide the necessary details and omit everything else. Line drawings are effective as illustrations in documentation and textbooks. They work well in infographics and they work well in assembly instructions.

People can identify objects in line drawings as easily as they can identify the same objects in photographs, but the line drawing works better when it comes to making the information memorable.

Line drawings should focus on the essential and remove any visual noise. They should also capture contours and prominent features. Viewers will then add their own knowledge of real world objects to interpret what they see.

Reduce Quantity for Greater Visual Impact

As I’ve mentioned a few times,the real world contains a lot of complex visual information. Reducing the quantity of information in our designs reverses what we naturally see and reduces the perception of realism.

If we limit the number of images, lines, shapes, and other elements, we allow visitors to focus on the essential. By reducing how many elements are present we reduce what needs to be visual processed and keep working memory from being overwhelmed. This lowers cognitive load and means less information needs to be integrated and stored.

Limiting the number of elements present increases the visual impact of those that are present. Each stands out more giving it a greater ability to communicate than if it had to compete for attention.

Remove what can be removed. Ge rid of visual noise for quicker and clearer communication. Organize what needs to stay. Viewer’s will see fewer groups than they will elements, reducing the perceived quantity of objects.

Summary

There’s a lot of noise in our visual environment and it takes time and effort to process all that information. Some can get lost and viewers might spend too much time and effort processing mostly irrelevant information.

Designers can reduce cognitive load and aid comprehension by removing the less than relevant details. We can reduce the realism in our designs to help speed visual processing.

By reducing visual noise, making use of silhouettes, icons, and line art, and reducing the amount of elements in a design, we can save visitors time and effort as they take in our work. The result is a design that quickly and effectively communicates and is more easily understood by those who encounter it.

Next week we’ll continue with some talk about how we can make abstract information more concrete through diagrams and other graphics.

Download a free sample from my book Design Fundamentals.

The post Communicate Efficiently By Reducing Realism appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Friday, 25 April 2014

The Web Is A Rectangle - Vanseo Design

The Web Is A Rectangle - Vanseo Design

The Web Is A Rectangle

Posted: 24 Apr 2014 05:30 AM PDT

Have you ever noticed how many websites look the same? How many are just a bunch of rectangles? How many seem to copy from one another? Where’s the uniqueness and creativity?


Note: This post includes an audio version. If you don’t see the audio above, Click here to listen. You can also subscribe in iTunes

These questions have come to my attention several times in recent weeks via a couple of podcasts and a tweet and its follow up posts. I want to take some time today to talk about the sameness and rectangularity on the web.

The two podcasts, On the Grid and The Web Ahead, both talked about the web’s sameness as a structural problem. Every element on a web page is a rectangle behind the scenes. The tweet by Mark Boulton and the follow up posts below talk more about responsive design possibly leading to sameness.

People always seem to ask questions about something leading to a perceived lack of creativity. You don’t have to look far to find articles about how technique x or tool y limits creativity. Many of these articles assert some common tool or popular technique is really doing us harm. I’ve written posts in reply to these assertions before and likely will again.

What can we do? Is our current practice leading to sameness? Is it the rectangular nature of the web? Is it our tools? Maybe the design industry simply lacks creativity. Why do so many sites look the same and what can we do about it?

Why Do So Many Websites Look the Same?

Please understand that much of what follows is me thinking out loud. I apologize in advance if this post doesn’t lead nicely to a cohesive point. It’s more random thoughts I’ve had and want to share. Let’s start with the underlying rectangular structure of the web.

The web itself appears to us as a rectangle as we view it through different rectangular screens. Our designs inevitably fill up a rectangle. Fundamentally everything you see on the web is a rectangle.

No matter how individual elements look there’s a rectangle behind them. This rectangle behaves according to the css box model and one of several different layout modules. You might see a circle, but that circle sits inside a box. You don’t see the box, but all the other elements on the page see it and respond accordingly.

And let’s face it. Rectangles work. They may get boring sometimes, but they work. Is everything being a rectangle behind the scenes a limitation prohibiting creativity? We’ve always been dealing with these rectangles. Why would they now limit creativity as opposed to a few years ago.

As we’re learning to design responsively many of us are currently more focused on the boxes. We’re working out the mechanics of responsive design and forming best practices. We’re less focused on aesthetics because we’re so focused on the structure behind the scenes.

Speaking of responsive design, Mark Boulton’s tweet was as follows:

I wonder if #RWD looks the way it does because so many projects aren't being run by designers, but by front-end dev teams

I’m not sure I agree. I don’t work with enough teams to truly know, but I have a feeling this isn’t about devs leading things as opposed to designers. It’s an interesting thought, though.

More likely it’s about the people who are becoming web designers and what their backgrounds were prior to going into web design. The person who becomes a web designer isn’t necessarily the same person who becomes a graphic designer.

I started my web design career as front end coder. I have no formal graphic design training and have taught myself whatever I know. My guess is many other web designers are in a similar place. Perhaps it’s not so much devs leading things, but web designers without graphic design training that are leading things.

One of the follow up articles to Mark’s tweet was by Stephen Hay who makes 3 interesting points to explain the sameness of designs.

  • Lack of a solid graphic design foundation
  • Excessive reliance on tools
  • Lack of critical design thinking when copying being influenced by the work of other designers

I agree with all 3 points. Like I said, I’d guess a majority of web designers don’t have graphic design training or schooling and started as web designers because they could work in html and css.

Our reliance on tools might be part of the creativity vs productivity debate. Designers use frameworks like Bootstrap and Foundation to speed development and be more productive. We make use of themes for content management systems. When a lot of sites are starting from a common point, it only makes sense the final products will share a lot and look similar.

Our clients want things to cost less. We want them to cost less. There’s always this tension between creativity and productivity. To a degree sameness could come from what people are willing to pay for. The less they want to pay, the less unique and starting from scratch they likely get. Some clients even ask for the same. They want their site to look like another site they like.

I’d also agree with the lack of critical design thinking. I think some comes from a lack of understanding design fundamentals. Many designers learn techniques and tips, but they learn them out of context.

Perhaps the problem is one of workflow. Even if designers are leading the process, perhaps something is getting lost in communication between designer and developer. Maybe it’s the process that leads to sameness.

The shift to responsive design affects most everything we do, from our tools to our processes. With so much changing and so many moving parts is it surprising that we’re focusing on a few at a time? We’re working with the layouts now and that’s what we see when we look at the finished sites.

Another reason for sameness is trends and people’s nature of copying. People have always copied what works. This isn’t something only happening now or in web design. A handful of people do something truly unique and once it’s shown to work, others copy it hoping for similar success.

The current trend in web design is flat design. It’s characterized by large flat rectangles and solid blocks of rectangular color. It’s a trend. People copy it.

When the trend changes to something with more aesthetic style, more original illustration, and more detail, the copies will be less exact copy. They’ll be more unique for a time before everyone gets good at copying again.

Designers are also looking more to statistics. We’re concerned with conversion metrics and seo and marketing in general. Here too we copy what works. If a certain design works well on landing pages you can be sure you’ll see more landing pages designed the same way.

Is it possible it’s something more? Is it possible the current slate of web designers simply lacks creativity? I don’t think so, but it’s fair to ask. Do we lack some kind of unifying theme, some conceptual core that pushes our designs forward? I think we lack both. The few times I’ve talked about elevating web design to something a little more than building websites, the talk has encountered resistance.

Maybe in the end the reason sites look the same is because fundamentally they’re all the same thing. They’re all information organized into pages connected by links. They all need navigation. Many are expected to have similar pages like about, contact, and home.

If form follows function and the function of most sites is similar, is it any wonder those sites end up looking similar? I think there are enough difference in site content for site designs to be different, but perhaps those differences aren’t as great as we might think.

Convention enters the picture here as well. We follow what works and cater to expectations to make our sites more usable. Navigation is placed across the top of the page or down the left or right sides, because people expect it to be there. We could create a new way to navigate, but then we run the risk of no one understanding how to get around our sites.

What Can We Do?

If we can do something to break out of this sameness what is it? What should we do to have more unique and less of the same?

Where there are issues caused by the shift to responsive design I think it will just take time for designers to get used to a new way of doing things. We’ll work out the layouts and get used to the workflows and deliverables and once we do more focus will be back on the aesthetics. Isn’t this how it’s always been?

In the very early days of the web there was no design. Elements just followed one another on the page. It worked, but it was visually boring. Then we used tables for layout and at first they were probably boring too. Soon someone realized you could slice and dice a Photoshop comp and reassemble it inside your html table and the aesthetics of a web page no longer followed the structure of the page.

Eventually we moved from tables to css and the focus was back on the layouts and everything looked rectangular and boxy. The same arguments about a lack of creativity were made then as they are now. Then we got used to css layouts and the aesthetics came back. The move to responsive design is just more of the same.

We can wait out trends or start the next one. The trend today is boxy. Is it any wonder that websites look boxy? A couple of years from now and illustration and depth will be back in and sites will look different.

Today’s trend strips away the ornamentation. It strips away the realistic details. It strips away little tricks we could use to cover a less than great decision. With less to work with there’s less variation.

For those who get flat design’s focus on fundamentals there’s plenty to explore aesthetically. For those that don’t all there is to do is copy. Hopefully in time the understanding of fundamentals will sink in with the copiers and we’ll see less exact copies and more inspired by other designs.

A certain amount of copying will always happen, though. It’s more productive and sadly feeds laziness. Again hopefully as designers gain more understanding of design fundamentals they’ll be able to look more critically at their own work and the work of others.

Time and waiting will also help with the structural problem of web pages being built from rectangles. CSS shapes especially, and to a lesser extent modules like exclusions, will help us break free from the box. We won’t be bound to rectangles only. Objets on the page will be able to look and behave like different shapes. Other elements on the page will react to the same triangle we see.

New shapes will open up more creative possibilities. They aren’t here yet, but they’re coming relatively soon.

Why do we have to show a presentation layer that shows the page’s structure? Do we have to show the grid behind the design? Can’t we have elements cross grid lines or look like circles when they’re really rectangles? Some might say it’s more honest to have your aesthetics match your structure. Maybe those people are right, but again I’ll ask if there’s anything wrong in our aesthetics looking like they sit on a different structure than what’s actually present?

One last thought about convention. We could and should be willing to try new things. We can’t do crazy things with client sites, but most of us work on our own projects and we can experiment with those. We’ll fail a lot and it will take people time to understand some of the new things we create, but we’ll learn before creating what becomes a new convention.

Of course, once we do everyone will copy the new convention and we’ll be having this discussion yet again.

Summary

A certain amount of sameness is inevitable. We learn from one another. We follow the same trends. We use the same tools, and work out the same problems often in front of each other. There will also be those who only copy and never do more.

The rest of us can experiment when and where it’s appropriate. We can try to work with new forms and new structures. We’ll see what works and what doesn’t and with that knowledge we’ll create less of the same old thing.

Give it time. In time the web will allow us to do more. We’ll have more shapes than rectangles to work with. In time trends will change and the next one may lead to more unique designs. In time we’ll have worked through the issues with responsive layouts and workflows.

In time we’ll move the focus back to the aesthetic layer. Much will be new again and then the new will get copied and we’ll be once again asking why so many websites look the same.

Download a free sample from my book Design Fundamentals.

The post The Web Is A Rectangle appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Tuesday, 22 April 2014

How To Direct A Viewer’s Eye Through Your Design - Vanseo Design

How To Direct A Viewer’s Eye Through Your Design - Vanseo Design

How To Direct A Viewer’s Eye Through Your Design

Posted: 21 Apr 2014 05:30 AM PDT

Where in your design do people look first? Where do they look next? After that? How much control do you have when it comes to directing the viewer’s eye?

The last few weeks we’ve been looking at visual perception and the design principles that arise from it. Today I want to continue and consider how designers might direct the eye of the viewer through a composition.

As I mentioned last week this series comes mainly from the book Visual Language for Designers by Connie Malamed.

A grungy looking arrow pointing down

Guide the Eye By Grabbing Attention

Our eyes take in a lot more visual information than our brain can consciously process. We want to focus on the most compelling information so we selectively look at what we think most important. This is called selective attention.

Studies have shown that we can be distracted by visual information even when it’s not relevant. If it’s attractive enough, it’ll grab our attention even against our intention. This suggests we can direct where the eye will look and select what will gain the viewer’s attention.

When we do we speed up visual processing, reduce cognitive load, and increase comprehension. Directing the eye allows us to

  • Guide the viewer’s eye along an intended path
  • Guide the viewer’s eye to the most important information

Our attention can be captured at any point along either the bottom-up or top-down process. To attract attention during the bottom-up process you want to use contrast and emphasis and to attract it during the top-down process you typically create steps in sequence.

Arrows and other visual cues will be understood more often than written directions alone

The movement of our eyes through a composition are not random. We look for desired information and our attention is pulled to specific elements with features prominently emphasized. We quickly skip over what’s irrelevant looking for meaning in what we focus on.

As we scan a design our eyes tend to move horizontally or vertically. Diagonal movements are less frequent. After a few fixations we get the gist of what we see and once we do eye movement is influenced by the content of the design itself.

Different people might scan the same design in different ways. Each of us is unique and will think different information more important. We all have some common tendencies, though.

For example most of us will start scanning in the upper left cornier of a design. Those who read right to left may start in the upper right corner, but there’s some debate whether that’s so.

Guide the Eye Through Visual Weight

The first step in directing the eye is drawing it into the composition. You can take advantage of the bottom-up process and emphasize an element so greatly it becomes the dominant visual element in the design.

This dominant element creates an entry point into your design. It suggests where the viewer should look first. Without a dominant element a viewer may find it difficult to organize the visual information in front of them.

You give elements different visual weights based on their color, size, shape, and a number of other factors that might draw attention.

You create a dominant element by giving it the most visual weight. From there you can create several focal points with varying degrees of visual weight. The more important the element, the more visual weight it would receive.

Ideally you’ll create several levels of importance through visual weight. Three is the typical amount as most people can only distinguish between most, least, and everything in between. It is possible to create more than three levels of importance, but with each new level there is less contrast between all levels and differences are harder to detect.

Techniques for Guiding the Eye

We have several techniques at our disposal to help us guide the viewer’s eye through a composition. The first two work because they affect visual weight.

Position

The position an element occupies in a composition creates perceptual forces and tension that affect it’s perceived importance.

For example higher in the composition is usually seen as more important than lower in the composition. This is why important information like logos and navigation are more likely located in headers than footers.

Studies suggest that anything seen in the upper half of an image is considered more active and dynamic. The upper location also increases the perceived visual weight of the element.

The position of elements helps vary their visual weight and helps you create a visual hierarchy leading the eye from one focal point to the next.

Emphasis

Emphasis makes elements stand out. Without it elements can appear flat and lifeless and there are less opportunities to direct the eye.

A varying degree of emphasis works best. The eye instinctively moves from most to least prominent. If everything is emphasized, then nothing is emphasized. You want to create a relative emphasis across elements in order to establish a dominant/subordinate hierarchy and structure for your information.

Contrast attracts attention. People sense that areas of difference are more important than areas of sameness. Contrast also helps us distinguish figure from ground. It helps us recognize shapes and textures and patterns. It makes some elements more prominent than others.

You can contrast elements through characteristics like size, color, shape, and texture. According to Rudolf Arnheim when all else is equal, visual weight will be most dependent on size. Others suggest tonal values offer the greatest impact.

Emphasis can also be created through contradiction. Place an unexpected object in a familiar context and the contrast in expectations will help draw the eye. You can also use attributes in unfamiliar ways. Make children larger than adults or elephants smaller than mice. This works because it breaks schemas, which lead to an increased interest.

Movement

Static compositions move and flow according to the directionality inside them. Lines, shapes, and textures carry energy and tension based on orientation, position, nearness to other elements, etc. This energy and tension create directional forces in the composition.

For example imagine the image of a pitcher pouring liquid. As the liquid flows down from the pitcher, your eye follows the perceived flow. Even though the pitcher and liquid are static in the composition, you sense the movement that’s occurring because you understand how the real world works.

Rudolf Arnheim suggested that three factors determine the direction of visual forces in a composition.

  • The attraction exerted from the visual weight of surrounding elements
  • The shape of objects along their axes
  • The visual direction and action of the subject

We perceive kinetic energy in static pictures because we know how objects move in the physical world. We know the liquid is pouring down from the pitcher and not the other way, because we know how gravity works.

We can take advantage of the quality of lines and shapes to create movement based on rhythm. Place several of the same element in sequence and vary some of it’s characteristics and rhythm is created for the eye to follow.

Left to right movement is easier to perceive even in cultures where reading occurs right to left. This movement appears to be more neurological than cultural.

You can also create movement through perspective, which draws the eye into the depth of field of the composition. The viewer deduces the depth in pictures based on how things appear in the visual world. Larger objects appear closer (and more important). Cooler colors appear further away.

Eye Gaze

Our brains are wired to detect and recognize human faces. In compositions we’re drawn to pictures of people and even more we notice their eyes specifically.

We automatically move our eyes in the direction we see someone else looking. It’s most likely a survival mechanism and it occurs in all people. Infants as young as three months old will follow the eye gaze of those around them. Whether it’s innate or learned, eye gaze leads to joint attention.

If you want someone to look in a specific direction in your design, you can place a human face looking in that direction.

Visual Cues

Like eye gaze we can offer visual cues that direct the eye and attention to elements of our choosing. Visual cues signal the viewer’s attention to more important information reducing fixations and time spent processing.

Visual cues include things like arrows, color, and captions. They provide shortcuts to finding information and have been shown to improve recall.

Arrows are often used because they’re very effective. They clearly point the way and direct attention. When an arrow points to a location it helps the viewer filter out the extraneous and focus on where the arrow leads. It keeps the focus on the essential which is a first step in comprehension.

Arrows and other visual cues are more likely to be understood than written directions alone. The cues provide a structure and cognitive framework to follow. Viewers can construct better structures in working memory making information easier to assimilate.

Arrows should be dominant enough to attract attention, but not enough to overpower everything else in the design.

Color is another cue that can be used to attract attention and direct the eye. Contrasting color acts as a signal for the eye to move. It’s one of the primitive features and it can play a large role in guiding the eye.

  • Color helps viewers search for and find what’s most important
  • Color helps viewers notice and distinguish elements
  • Color emphasizes figure/ground contrasts and relationships
  • Color helps make information memorable

Color helps us organize and categorize. Differences must vary enough from background and surrounding elements to get noticed quickly and you should avoid using too many colors in a single design. Use color to note key information and help recall, comprehension, and retention of information.

Summary

Because the eye is always moving and fixating we can help guide people through a composition by directing where the eye should look next.

We begin by creating a hierarchy of relative importance through visual weight. The more visual weight an element has the more attention it attracts. Creating levels of importance in a composition help the eye quickly understand the scene in front of them and suggest the order in which to take in specific information.

We can use position, emphasis, movement, eye gaze, and other visual cues to help the eye find its way through a composition. Doing so speeds up visual processing, reduces cognitive load, and increases the probability viewers will see what we want them to see.

Next week we’ll continue with a look at realism and how reducing realism is often the best way to reduce cognitive load, help people find things quicker, and help them comprehend and retain the information they encounter.

Download a free sample from my book Design Fundamentals.

The post How To Direct A Viewer’s Eye Through Your Design appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Friday, 18 April 2014

Why I Design - Vanseo Design

Why I Design - Vanseo Design

Why I Design

Posted: 17 Apr 2014 05:30 AM PDT

Do you ever think about why you design? Or develop or market or whatever it is you do? You know the events that led you to become a web designer. Was it a conscious decision? Were you following your instincts? Now that you’re here do you know the reasons you stay and continue designing?


Note: This post includes an audio version. If you don’t see the audio above, Click here to listen. You can also subscribe in iTunes

I’m not sure what led me to think about this, but it’s been on my mind recently. I started listing a few reasons in response to the question of why I design and the next thing you know, I had enough to become this post.

My Path to Becoming a Web Designer

I didn’t choose design as a career early in life. I wasn’t sitting around the house drawing all day or showing off my creative output. I didn’t go to school to learn graphic design or web design or any other kind of design.

In the summer of 2000 I found myself working for a dot com that produced ebooks before most people cared about ebooks. One part of my job involved navigating through the code of the ebook, which was a markup language similar to html, though not html. I enjoyed working in the code and found it easier to navigate the book in code than through the content.

In the spring of 2001 the dot com bubble burst and like many companies at the time the one I worked for was struggling. There was a day with massive layoffs and those of us still employed knew it probably wouldn’t last long. I realized the skills I had gained at the job wouldn’t transfer to other jobs and I thought it would be a good idea to add to my skill set.

I started taking continuing education classes through the University of Colorado. First I began a certificate in C++ and not long after I started one in web design. Then I was let go from my job.

Fortunately someone also taking the same classes worked for a company that was hiring software testers and he asked me if I’d be interested. A year later IBM bought the company and because we made a competing product they let most of us go. Once again I was looking for work, only now I had some skills.

Over the year, I had discovered I liked web design more than programming. A friend of mine was also unemployed and together we decided to start a business. She would design and I would develop. Unfortunately neither of us knew much about business and before long what little business we had trailed off to nothing.

She decided this wasn’t her passion and moved on to other things. I decided it was my passion and tried again on my own. I thought I would take what I learned from the first business and see if I could get the second one going.

One of my biggest challenges was having to design as well as develop. I had confidence in my eye being able to tell good from bad, but I didn’t have the skills to create the good. I kept things simple to reduce the possibility of mistakes. I stayed away from illustration and imagery and focused on foundational design principles. I’ve been in business ever since.

Those are the last few steps that led me here, but they don’t really tell you why I design. They don’t tell you what I like about design and why I continue to do it day after day. They only tell you how I arrived here.

Reasons I Design

There are a number of reasons why I design and why I feel passionate about it. Perhaps number one on the list is that being a web designer involves a good mix of left and right brain activities. Design allows me to satisfy my creative side as well as my logical problem solving side.

There’s always something to learn, especially as I both design and develop. The technology keeps changing and there are so many disciplines that help make you a better designer. You can dig deep into a single subject or you can broadly learn across subjects.

I enjoy the nature of my work being in constant flux. Like I said there’s always something new to learn and ways to improve.

When it comes to the freelance aspect of my business I include design and development, blogging, and running a business forum, and all the things I do day to day. I think the combination of these things provides me an opportunity to contribute back to the world in a way that I’m capable of contributing.

And for some reason design is something I find myself wanting to do better. While I began life as a web designer from the front end development side and continue to improve my front end skills, it’s design that mainly pulls me to get better.

Like I said being a web designer let’s me exercise both sides of my brain. I enjoy the problem solving and design is about solving one problem after another. It mixes solving problems with finding new ones to solve.

On the other side I enjoy the art and aesthetic beauty of design. As I recently posted, design isn’t art, but there is a lot of overlap. Both designers and artists are concerned with composition. Both are concerned with balance and flow and visual weight. Both consider color and elements of space and line and shape. Both are interested in concepts like size, scale, and proportion.

Learning to design better helps me understand art better. Design gives me a greater appreciation of objects around me. I think more about how they were created and the decisions made in the process of that creation.

Design gives me a greater appreciation of nature. It helps me see how our world is put together and how it evolved. It helps me see the beauty that’s around us. I think about what it would take to design a flower and if that design would be as good as millions of years of evolution.

Design gives me a greater appreciation of human beings. There are so many disciplines that can help you be a more successful designer. Learning more about disciplines like psychology and physiology helps me design better and also helps me understand people more in general.

It also gives me an appreciation of human beings in the sense of seeing what we can accomplish. It helps me understand some of the things our species has designed and the challenges that were overcome. I think about sending people to the moon and bringing them back and all the decisions that must have been made and it’s hard not to be impressed.

Decisions for Design and Life

At its core, design is about making one good decision after another toward a goal. I believe decisions are made better when you have more and better information to base your decision on. Gathering information is a large part of what it means to be a designer. To become a better designer you have to become a better researcher.

Knowledge is power and better information leads to better decisions. Better decisions generally lead to you being a better you and getting to where you want to go. The lessons learned in making decisions and learned in how you make decisions can be applied to many things beyond design.

You can design anything including your own life. The decisions you make daily will shape who you become. Learning to make better design decisions means learning to make better life decisions. To direct your life toward a goal, make consistent decisions that keep you moving toward something.

Why I Freelance

The freelance aspect of my business offers some additional reasons for why I do what I do. These reasons aren’t specific to web design, though web design is one industry that allows for a freelance lifestyle and work style.

Freelancing offers more freedom over my work and life. It gives me more responsibility for my success or failure. When I do well I get the credit. When I do poorly I get the blame. I like having that control over my success or lack of success.

As a freelancer I have greater control over who I work with and what projects I take on. I get to choose where and when I work. I get to use whatever tools I want to get the job done.

You may have noticed I haven’t offered money as a reason for why I design. Other than mentioning how I’ve been in business awhile there’s nothing here related to the finical. I’m hardly rich, but I’ve been in business about 10 years so I must be doing something right financially.

I don’t want to imply that money isn’t important. It is. We need to pay mortgage or rent. We need to pay for utilities and buy food. However, money isn’t the prime motivator for me. If it was being a freelance web designer was probably not the best career choice.

The potential for more money is there. I can stop designing for clients and design solely for myself. At that point I might be less of a designer and more of an entrepreneur who knows how to design. As it stands I’m a designer and I make enough to meet my needs.

Summary

There are a lot of reasons why I design. Most have to do with the great variety and great depth design provides. It exercises both sides of my brain and there’s a never ending supply of things to learn. You can go deeper into a subject or reach broadly across a variety of different topics, but there’s always more to learn.

Being a freelance designer offers freedom in how I work and how I live. This freedom is why I work for myself. Choosing the who, what, where, when, and how of my work is important to me. The combination of being both designer and freelancer gives me a unique voice from which to contribute.

You might share some of my reasons for why you do what you do and you likely have some different reasons as well. Do you think about them? You know the events that led you where you are, but do you think about why you stay and continue? Do you know why you design or why you develop or market or write or whatever it is you do?

Download a free sample from my book Design Fundamentals.

The post Why I Design appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Tuesday, 15 April 2014

How To Organize Information for Early Visual Perception - Vanseo Design

How To Organize Information for Early Visual Perception - Vanseo Design

How To Organize Information for Early Visual Perception

Posted: 14 Apr 2014 05:30 AM PDT

Visual perception is a 2-direction process of information flow. Visual data at each end of the process interacts with and influences what happens at the other end. Understanding how the process works allows us to form design principles based on how we perceive our visual environment.

A texture of stripes
The primitive feature color, is used to organize the texture into stripes

The last couple of weeks I talked about the mechanics of visual perception. I’d like to spend the next few weeks talking about design principles that arise from those mechanics and consider what we can do as designers to take advantage of the way our senses take in information and how our memory processes what we see.

Much of what follows in this series will come from the book Visual Language for Designers by Connie Malamed. The topics I cover here will follow the chapters below from the book.

  • Organize for Perception
  • Direct the Eyes
  • Reduce Realism
  • Make the Abstract Concrete
  • Clarifying Complexity
  • Charge it Up

Note that my post titles probably won’t follow the above chapter titles exactly, but hopefully the above gives you a sense where this series of posts is heading.

What Happens in Early Vision?

To understand our surroundings we first form a rough picture of our visual environment and later use our rough picture to determine where to look next. The rough picture is formed unconsciously in early vision, while conscious decision is made during later vision. Two different types of processing are involved.

  • Parallel processing — occurs in early vision. Instead of scanning objects one by one to find something we quickly see features that pop out from some objects.
  • Serial processing — occurs in later vision and is a longer process. It’s guided by selective attention and we do scan objects one by one based on something we’re consciously looking for.

Through primitive features, textures, and grouping, we reduce the cognitive load of our visitors

Pre-attentive processing is the unconscious accumulation of visual information that occurs in early vision. Our eyes scan our surroundings to detect prominent features. Eye movement is driven by the attributes of objects rather than conscious decision about where to look.

Early vision organizes what we perceive visually and gives it structure. Our eyes can quickly see primitive features like color and size that pop out. We’re able to unconsciously recognize the relationships elements have with each other and the relationship they have with the whole.

Our ability to recognize relationships allows us to separate figure and ground and organize the information we see into meaningful groups of units.

Being able to quickly recognize primitive features like color and size also enables us to distinguish textures, which are essentially areas with similar features. We recognize changes in texture and see the change as a border or boundary between two textures.

Knowing how quickly and unconsciously early vision occurs, we can design in a way that enhances the visual process. We can organize and structure our designs in ways that complement and speed up visual processing. We can grab attention and provide meaning to what’s on the page through the use of primitive features and grouping. We begin the process of communicating with our viewers before they’re even consciously paying attention.

Offload Cognition — Don’t Make Me Think

Pre-attentive vision begins when something new appears in our visual field and before conscious attention is paid to it. The process scans the new information and gives it meaning that’s recognized by the unconscious.

It’s an important step for understanding our visual surroundings. How well we organize the visual data we take in and how well we combine it with existing schemas can determine how well we comprehend the information.

As designers we can attract the eye to the most important information by emphasizing primitive features and creating the pop out effect. By grouping related information we can help the viewer know which information goes together and which should be compared to which.

Organizing and emphasizing information for early vision creates something of a domino effect. We reduce cognitive load (don’t make me think) from the moment a person encounters our design. We group information so the viewer doesn’t have to. We call attention to the most important information so the viewer doesn’t have to decide where to look for it.

Both help viewers interpret the information they see as we intended and it enhances their comprehension. Our message is more likely to be understand if we align our design with the pre-attentive process in early vision.

Think about how people will find, organize, and group visual information and make it easy for them. Reduce the cognitive load of your audience. Think how quickly they can recognize primitive features.

Emphasize the features of some objects against a background without distraction. Make those objects stand out and attract attention. Group like elements together and create textures to help people quickly understand the structure of your design.

Cognition takes effort and if we offload some of the work we can help viewers move some visual processing from working memory to early visual perception. We can reduce their cognitive load by doing some of the work for them and leaving more room for them to process our message.

Create Pop Out with these Primitive Features

Primitive features can be quickly found, scanned, and recognized before conscious attention is paid to them. We can use these features to make elements pop out and get noticed. Our eyes will register the pop out features and they’ll be more likely to hold our conscious attention in later vision.

Features most likely to attract attention include:

  • size
  • color
  • depth
  • shape
  • motion
  • orientation
  • line curvature
  • line terminators
  • closures (enclosed space)

All can be emphasized and contrasted in ways that makes them visually prominent. Emphasizing multiple primitives in a single object will create even more prominence.

For pop out to occur a viewer must be able to distinguish the feature from everything else. The difference between the same feature in other elements must be great enough to quickly distinguish between them. If the difference isn’t large enough, it might be confused as noise.

Use Texture To Structure Your Information

One of the first things we do in pre-attentive vision is organize primitive features into regions of texture, which form the optical grain of a composition.

Our unconscious connects and groups objects into different regions separated and bound by abrupt changes in texture. The change in texture defines where one object begins and another ends. Textures become shapes and organizations of shapes for our later conscious attention to explore.

This is where we decide what is figure and what is ground. Textured areas tend to be seen as figure and non-textured areas as ground. Color and size also contribute to our determining the figure/ground relationship, which is a prerequisite for being able to perceive shapes and identify objects.

When a texture is made from simple primitives like repeating lines or shapes it can pop out. When emphasized enough texture can even be more prominent than shape or line. Pop out can be lost, however, if the texture is placed against a busy and complex background. It becomes more difficult to recognize the boundaries of each texture as they don’t offer enough contrast with the busy background.

Texture presents spatial information and provides depth cues. Separating textures from one another during early vision is one of the keys to understanding the meaning of a design

While it might not be the first thing you think about in regards to texture, text can be repeated, varied, layered, and generally manipulated to create textures. The words convey literal meaning (that may or many not be legible), while the texture created conveys a visual meaning.

Group Information so Visitor’s Don’t Have to

Spatial organization is a fundamental operation of the pre-attentive process. We have a tendency to organize elements into meaningful groups based on location and arrangement. An understanding of where objects are located and how they’re arranged is important to understand and move through the visual environment.

We group the parts into wholes. Elements are associated and thought of as belong to single larger units. The relationship between them becomes a valuable mechanism for cognitive processing and conveying meaning.

It’s Gestalt theory and principles in action. We group parts into wholes and seeing the wholes takes precedence over seeing the individual parts.

By arranging elements into meaningful units we take cognitive load away from the viewer. I’ve mentioned a few times how reducing cognitive load improves comprehension. It makes visual search quicker and helps viewers organize and interpret the information they see.

We can employ several tactics to group our elements and you might notice their connection to Gestalt principles.

  • Proximity — place related elements nearer each other than to unrelated elements
  • Similarity — elements that are similar should look similar
  • Symmetry — symmetrical elements are more likely seen to belong together
  • Boundary — enclose like elements and separate them from other elements
  • Connectedness — physically show the connection between related elements

We can even make new features emerge such as having a set of lines radiate from a common central point lead to a picture of the sun emerging.

Summary

In early vision, before we’re consciously controlling where to look, our eyes can quickly find and recognize the primary characteristics of objects. By emphasizing these primitive features we can quickly draw the eye to an element.

In addition to creating pop out, designers can create textures that help viewers separate figure from ground and help them understand the structure a design. We can also take advantage of pre-attentive processing’s desire to group elements by grouping them ourselves.

Through primitive features, textures, and grouping, we reduce the cognitive load of our visitors. We move some of the load from working memory to initial perception. Reducing the cognitive load of the visitor leads to greater communication and comprehension.

Next week I want to continue talking design principles that arise out of visual perception mechanics. I’ll continue with what the mechanics suggest about how we can direct the viewer’s eye through a composition.

Download a free sample from my book Design Fundamentals.

The post How To Organize Information for Early Visual Perception appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Friday, 11 April 2014

Choosing Context — Knowing Which Advice To Apply - Vanseo Design

Choosing Context — Knowing Which Advice To Apply - Vanseo Design

Choosing Context — Knowing Which Advice To Apply

Posted: 10 Apr 2014 05:30 AM PDT

How do you know which advice given to you is worth trying? Do you try everything? Do you assume it will always work if it worked for someone else? Today I want to talk about context, mostly as it relates to your current situation and any advice you might apply to your situation.


Note: This post includes an audio version. If you don’t see the audio above, Click here to listen. You can also subscribe in iTunes

The idea came from a short video I watched a few weeks ago in which Laura Kalbag was interviewed about a workshop she’s giving at the Interlink Conference.

The video doesn’t have anything to do with this topic of advice and context, but when introducing herself, Laura mentioned that she serves “little clients” in the sense of number of employees and the size of the business. Laura serves small and micro businesses and startups.

Instantly I noted the connection to my own clients and thought “here’s someone who probably knows something about my clients and consequently my business.” Any advice she offers about running a business likely pertains to me and is something I should pay attention to. Our business share certain characteristics, because their contexts overlap.

By the same logic if you have similar clients than anything you read here probably applies more directly to you than if it came from a corporate site. If I share a story about a client it probably resonates with you. We share that context.

This all made me think about advice in general and everything that we might take in. It made me wonder how much of the advice we receive actually applies to our situation when receiving it.

I’m wondering how often your context is similar enough to another’s that the advice applies and how often it’s different enough that the advice, while clearly successful, doesn’t work for you. Despite it being good advice and working for some, it doesn’t work for your situation, because the context in which the advice was given differs so much from the context in which it’s received.

A Story About Context

Let me share a story about context and advice. Many years ago I was driving from Long Island, where my family lived, to Buffalo where I was going to school. It’s been awhile, but it was likely a Sunday after a long weekend or maybe a full vacation away from classes.

Five or so hours into the drive I was making good time and about to drive through Syracuse (about 2 hours from Buffalo). It started snowing and then my windshield wipers stopped working. I pulled off the highway, found a station, and got a price to fix the wiper motor.

I gave my dad a call. He owned an auto shop and I figured he’d be able to tell me if I was getting a good price. He (in Brooklyn) wondered why it was a big deal as it wasn’t snowing.

Me, a few hundred miles away and on the other side of the state tried to convince him it was indeed snowing where I was and my wipers not working was something that needed fixing right away.

It’s a humorous story that comes down to our contexts being different. For one of us it was snowing and for one of us it wasn’t. Think about the different advice you might give someone in my situation depending on the weather where you happened to be or what you perceived it to be elsewhere.

What is Context?

By context I really mean the sum of everything you are and want and everything that’s led you to being where you are at any given point in time. I also mean the various parts of one context; it’s different sub-contexts, and how those sub contexts might overlap.

You’re unique. I’m unique. No one is exactly like either of us. We all have a different context, a different voice to express. We might share similarities, but we’re ultimately unique and see the world in unique ways.

It’s both an empowering and terrifying thought. It’s empowering because it means you always have control over your life and success. It’s not about whether other people have succeeded or failed or how they did it. It’s about knowing no one else’s situation applies exactly to you so you can always try to find a way that works for your context.

It’s terrifying for the same reasons. Because no one can tell you exactly how to succeed you can’t follow a recipe. You have to figure it our for yourself. You have control over your success, but you also have the responsibility for getting there.

Like many people starting out in business, I didn’t know much about how to start and run a business. I turned to the internet to do research and found some people who appeared successful and seemed trustworthy. I listened as they shared experience and insight.

Some of what they shared was universal. It would work regardless of any differences in our situations. Some of what they shared was specific. It might have been good advice, but it didn’t apply to me at that specific point in time so I didn’t follow the advice.

It needed to be applied within the same context to work. Sometimes I could replicate the specific advice near exact, but still it wouldn’t work. My business was at a different stage than the business of the advice giver.

Take the same article and place it on a site like Smashing Magazine or one of the Tuts+ sites and it’ll likely generate more discussion and traffic than if that same article was on your site or my site. Granted I don’t know your site, but assuming it’s like mine, it doesn’t have nearly the same size audience as the Tuts+ and Smashing Mags of the world.

Someone writing for those sites might offer the advice to create great content and you’re done. It won’t work though (at least to the same degree) unless you have a similar sized audience

There are plenty of reasons why one business might not be able to apply advice from another business.

  • They serve different industries
  • The strengths and weaknesses of the individuals involved is different
  • They serve different size markets (fortune 500 vs micro business)
  • Work done in the past and not included in the advice is paying off now in combination with the suggested advice
  • Your budget might allow you to implement most of the advice, but it doesn’t allow the key to the advice working
  • Advice is usually given under ideal conditions, but it isn’t realistic to apply that ideal to the practical.

Of course the more similarities you share, the more likely any advice being given in a similar context. This is especially true if you can distill the advice into component parts (sub-contexts) that are similar to parts of your overall context.

I think this all suggests we have 2 responsibilities when it comes to deciding which advice to follow. We need to be responsible for guiding our own context and we need to be responsible for choosing the appropriate contexts we let shape ours.

You Choose Your Context

Some of what becomes your context happens without your conscious control or even awareness. Things like your genetics; where you were born or grew up; what specifically occurs in any environment you place yourself in.

Much, however, is within your control. You may not be able to control what you find down the path you’re walking, but you do get to choose which path you walk down. You can choose to leave that path and find another whenever you want.

You decide what interests you. You decide what to pay more attention to. You decide what to deeply study, which clients to serve, and so many other things. You follow a path because it aligns with your strengths or because the potential reward is worth the risk. Ultimately the direction you want to go is up to you.

The path you choose presents things which further shape your context and shape the type of information you take in, observe, and pay attention to, which further shapes your context and the cycle continues.

You choose your path. Your path becomes your context and shapes it with what you find and how you interpret it. Ultimately your context is unique to you and any information you take in should be uniquely tailored to you, your path, and the specific moment you’re living.

Choose the Context You Want to Listen to

Making conscious choices about your own context and the direction you want to travel should suggest what other contexts you want to let in to shape yours.

You should listen to most everything and everyone even if you don’t think your contexts overlap. You don’t really know and so it’s worth listening. When trusting what to apply you should be more discerning.

Try to understand the context in which any advice is given. Know that the article you want to publish will have different levels of success depending on where it’s published, it’s context for being consumed.

Look at the advice giver and think if your goals match. Will your strengths and weaknesses allow you to implement the suggested solution? Is the advice right for you at this moment? Do you have the same motivation to solve the problem as the advice giver.

Advice givers offer advice based on what’s worked for them. The implication is that it will work for you as well, but that really depends on how much your contexts overlap.

Learn to see beyond the entirety of the advice giver’s context and learn to see the different parts within. Learn to see the sub-contexts. You might be very different overall than the advice giver, but you might share similarities when it comes to the specifics of the advice.

Think too if you’d be willing to change your context to suit the advice. Maybe you serve small business clients, but want to serve Fortune 500 clients instead. In that case listening to the advice of someone who does serve Fortune 500 clients makes sense, even though your current contexts are completely different.

Advice isn’t given or taken in a vacuum. There’s a context in which it’s given and a context with which it’s received. There needs to be some overlap between the giver and receiver’s context (at least around the specifics of the advice) in order for that advice to apply.

Sometimes there’s so much overlap that most anything the giver says applies to the receiver. When you find people who have contexts similar to your own, pay attention to learn from them.

Download a free sample from my book Design Fundamentals.

The post Choosing Context — Knowing Which Advice To Apply appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Subscribe to: Posts (Atom)