Underlined Links — When Is It Ok To Break From Convention? - Vanseo Design

---

Underlined Links — When Is It Ok To Break From Convention? Posted: 29 May 2014 05:30 AM PDT Following convention leads to a more usable site. Convention presents the known and expected to visitors, which helps them orient themselves and lets them use existing knowledge and apply it to your site. If convention is so helpful, is it ok to ever break from it? 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 A recent change to Google’s search result page has me thinking about both links and convention. You may have noticed the change. Google removed underlines from all links. The underline shows on hover, but not by default. When I first saw the change, I didn’t notice the missing underlines. I could tell something was different on the page, but I thought it was a slight increase in font-size. I’ve seen a few articles since, that discuss the change and suggest it will lead to many other sites across the web dropping the underline on links as well, potentially reducing the accessibility of links. Why Google Can Drop Underlines Like I said, I didn’t notice the underlines had gone away when I first saw the changed results page. Shows how observant I am. Or maybe it shows that the underlines aren’t necessary. Google’s results still look enough like they did before. Everything is still in the same place. The text that used to be links are still links. Their color is the same. Anyone who’s used Google for any length of time (which should include nearly everyone) probably isn’t confused by the new look. Something tells me the color says link more than the underline. It wouldn’t surprise me if many people didn’t notice, just as I didn’t. Perhaps they also sensed something different, but didn’t instantly connect the difference to the change in link appearance. Even if the changes was more significant and did lead to some confusion, Google could probably get away with it. Many people rely on Google and would be motivated to learn the new. They likely visit Google often enough speeding up the learning. Would it still be the same on a different site that wasn’t used by as many people or as often? How about this site? Why This Site Doesn’t Underline Links The previous design of this site used blue, underlined links. I link out a lot from posts and in reading you’d pass by quite a few blue and underlined fragments of text. I wondered if anyone found them distracting and if they kept people from making it through posts. I no longer underline in-content links as you know if you visit the site. Like Google, the underline appears on hover. Or perhaps I should say that like this site, Google now shows underlines on hover, given I beat them to it by a couple of years. And in fairness to designers everywhere, I was hardly the first person to drop the underline. Instead of the underline I italicize the links. The links are still blue, though a less saturated blue that doesn’t stand out as much against the black text. To some degree that choice was specifically made to make links less noticeable. I want you to be able to read through the content without being distracted. I didn’t want the links to disrupt the flow of your reading. I do, however, want you to be able to find the links when you want them and think there’s enough difference with the rest of the text to make that easy enough for most. Note: Looking at the links and text now, I think the contrast in value probably isn’t enough, which is something I should look into more. Hopefully you can both ignore and find the links based on what you want. People do seem to click them. Analytics tells me they get clicked often. Let’s face it. You’re a web savvy audience. Why else would you have read this far into a post about web design. I’m sure I can break quite a few conventions and you’ll figure it out quickly. Getting back to links here on the site, they’re located primarily in three places. The main menu The secondary menus In-Content links In the main navigation the links look like ordinary text. In the secondary menus, the links are blue, but again it’s a desaturated blue. Links in the main menu get an underline on hover and links in the secondary menus have their background color change on hover. Neither the main menu or the secondary menus follow the conventions for what a link should look like. In both cases though, the menus look enough like menus. They use enough of the conventions that signal navigation bar or menu that I would think people would recognize each menu item as a link. I’ve already discussed the in-content links, which are a desaturated blue and italicized. Underline on hover and noticeable, but not noticeable. There’s actually a fourth place you might find links here and that’s in the images. The logo and the rss icon are links. Some images in posts are links when they’re licensed under creative commons and require attribution. While I don’t think it happens often, I expect some people may not realize the in-content links are links. It’s ok with me. It’s not ideal, but I think what’s gained in making content readable offsets the loss some people may have not realizing links are links. I’m also thinking anyone who doesn’t figure it out, probably isn’t an ideal visitor and this site isn’t an ideal landing spot for them. There are enough clues for those with even just a bit of web savviness to identify the links. They’re the only blue text on the site and for the most part they’re the only italicized text. Another note: I realize on occasion I italicize some non-clickable text. It possibly sends a mixed message even though the text isn’t also blue. It’s something else I should take a look at and reconsider. Even if you didn’t know instantly, I doubt it was much effort to figure out what is and isn’t a link here on the site. Even if finding that first link was an accident, I don’t expect it took long to find the rest. There’s enough similarity between links and enough difference with everything else so the information learned from one link, quickly transfers to the others. Click one and you’ll know you can click the rest. I may not be following the exact convention for links, but I am following some of it and I do my best to keep things consistent across the site. If the link is in-content, it’ll be a desaturated blue and it’ll be italicized. Is it ok to Break with Convention? If you want to reach the most people go for the convention. Links have been the default blue and underlined since there were links on the web. The practice of underlining text in general has gone away for the most part so as not to be confused with the convention. Convention is the least common denominator. It’s what will work for the most people. Blue and underlined is well-ingrained in nearly everyone online. It’s not something that requires savvy. Like anything else in graphic design, like anything else in language, there are multiple ways to communicate the same thing. Blue and underlined are not the only way one can show that a link is a link. You could bold all links for example and only use bold for links. The further you get from the convention though, the harder it will be for the less savvy to know the link is a link. The savviness of your audience should be a great consideration in how far to veer from the standard. You should also consider the web as a whole is much more savvy than it might have been a decade ago. If you emphasize linked text in some way so it contrasts enough with the surrounding text to be noticeably different, it likely provides enough visual cues for people to click. People who revisit your site will have more opportunity to learn the new and likely need even less cues to figure things out. You might be breaking convention, but if you remain consistent, you’re establishing a new convention for people to learn. It might be a convention that only exists on your site, but it’s a convention nonetheless for your one site. Again I’m not so worried about it here as I expect this site is visited by web savvier people and part of my aesthetic choice was to make the links less noticeable. Convention helps orient people. It’s one less thing they need to learn to use a particular site. The knowledge they gained on other sites is easy transferred, assuming you follow the same conventions. The more sites that follow the same conventions, the easier for everyone. When people talk about a design being intuitive, what they really means the design follows enough established conventions so everyone knows how to use it. It’s learned behavior though. There’s no intrinsic property of blue, underlined text that makes us want to click it. It’s something we’ve learned over time. There is a downside to following convention and that’s that it can lack interest. It’s familiar. We’e seen it before. Ho, hum. Convention can be easy to ignore. It’s like ad blindness. We all know where the ads are, which makes them easier to ignore. Where links are concerned the default blue might not fit your design. It’s unlikely you want all your color choices to follow from the stander blue used in links. The design of the links should fit with everything else. Constraints are good, but every site shouldn’t be constrained to work with the same blue. It’s also possible a convention isn’t the best way to implement something. It might have been and people copied it. It might not have been and people still copied. It’s convention more because it’s common than because it’s the best solution. Think about main navigation, which is often a horizontal list of links. It’s worked well for years, but is it the best solution for a narrow screen? That depends on how many links there are. If you have more than four or five, it doesn’t work so well on phone screens. Responsive design is forcing us to rethink navigation. On smaller screens an off canvas pattern probably works better and I expect it’ll become the convention. A menu button or a hamburger icon will reveal the menu. It works and works well. I won’t be surprised if it becomes convention on wide screens too. We’ll have become used to them on smaller screens and understand how they work. It’ll be easier to develop when it doesn’t have to change as much. It will probably replace other navigational patterns at some point. Tips When Breaking Convention Assuming you do want to break convention and try something different, I’d suggest a few things to make the learning curve less steep. Don’t change everything. Hold on to some aspects of the convention as you change other aspects. I don’t underline links, but the links are still blue, even if a different blue. Make the new similar enough to the old to be recognizable for it. Visual unity is important in general and for developing conventions. The sameness established convention for a particular design. Reuse in other designs establishes it beyond the one site. If you decide that all links should be green and bold on your site and you’re consistent in only links and nothing else being bold and green, then you help people understand that on your site green and bold is a link. If enough other sites adopt the same aesthetic treatment, it becomes convention. Think of it as a spectrum or continuum. At one end is repeating the convention exactly. At the other every characteristic of the text is different and unrecognizable as the convention. The closer to convention the more usable it will be initially. Figure out where on the continuum your audience is and how far that allows you to break from convention should you want. I’d also suggest making sure you know the convention and understand why it’s become so. Understand why the color blue and why an underline are used to indicate a link. Did it have to be blue? Underlined? Were the choices arbitrary to any degree? In the case of links, blue and underlined were mostly likely chosen because they contrast with the typical black or dark grey used for text in general. That suggests you can break the convention as long as you make your links stand out from the rest of the text. Conventions are important. They do make sites easier to use and they help orient people to new surroundings. Don’t be afraid to deviate from the convention, though. Do understand why you’re breaking with it and what the convention was designed to do specifically. The less web savvy your audience, the better you are to stick with convention. The more savvy, the more you can change with the confidence your visitors will be able to adapt quickly. Download a free sample from my book Design Fundamentals. The post Underlined Links — When Is It Ok To Break From Convention? appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

Visual Perception — Series Wrap Up And Key Ideas - Vanseo Design

---

Visual Perception — Series Wrap Up And Key Ideas Posted: 27 May 2014 05:30 AM PDT For a couple of months now I’ve been running a series on visual perception and some of the design principles that arise from it. The series completed last week, but I wanted to offer something of a summary today to highlight what I think are the key points from the entire series. First credit where credit is due. While I’d like to tell you all the ideas in the series were mine, they mostly come from couple of books I’ve read. The first is Visual Thinking for Design by Colin Ware, which I relied on for the first two posts in the series on bottom-up and top-down visual perception. I’ve relied on it in the past as well to cover mostly the same subject. The second book is Visual Language for Designers by Connie Malamed and I’ve been mentioning it through much of the series. It also contributed to the two posts above and I relied on it exclusively for the remainder of the series, which follows closely with the chapters in the book. The Series Here’s the series in its entirety in case you missed any of it. Bottom-Up Visual Perception: What Saccadic Eye Movements Suggest For Designers Top-Down Visual Perception: How You Can Tap Memory To Direct Eye Movement How To Organize Information for Early Visual Perception How To Direct A Viewer's Eye Through Your Design Communicate Efficiently By Reducing Realism Using Graphics to Make Abstract Concepts Concrete How To Make Visually Complex Information Easy To Understand Use The Efficient Power Of Emotional Design To Connect With Your Audience As I was writing my way through the posts above, I noticed several ideas and concepts emerging. Visual perception works in two directions and each side influences the other as well as everything in between Primitive features like color and shape attract attention The schemas and mental models of the viewer set context Working memory is aptly named as it does a lot of work and reducing how much work it has to do is an important goal Visual Perception At one end of visual perception is the external. Our eyes take in our environment through the fovea, which can only focus on a very small area at any given time. To see more of our visual surroundings our eyes must alternate between very quick movements (saccades) and fixations. This occurs so fast we’re not consciously aware it’s happening. At the other end is the internal. It’s the memories we hold from what we’ve seen and experienced before. Our memories organize information into structures called schemas and mental models to helps us make sense of the world. In between sits working memory, which has to hold information, process it, interpret it, and synthesize the new with existing information. Working memory is aptly named because it does a lot of work. Both ends of visual perception influence the entire process. You might interpret information based on how it looks or how well it fits into your internal structures. Both ends contribute to whether information (both verbal and visual) is synthesized and how. As designers we can also influence the entire process, by understanding more about how it works and doing what we can to complement nd work with perception at any point and in either direction. Primitive Features Information that moves from the external to the internal is bottom-up processing. Much of what occurs when our eyes move about and fixate happens prior to cognition. It happens on an unconscious level. It’s instinctual and likely a survival mechanism. We need to be able to quickly distinguish a friend from an animal that sees us as dinner. To survive we need to notice and identify things as fast as possible. Our eyes are attracted to different characteristics of the objects around us. We call these characteristics primitive features and the main ones that capture our attention include, size, shape, color, motion, orientation, and depth. When we emphasize one or more of these features we make elements stand out and attract attention. Each of these (and other) features contribute to the visual weight of an element, which is another way of saying how much the element attracts the eye. Varying these characteristics helps us create structure, which leads to contrast and similarity, hierarchy, flow, balance, and other design principles. Comparing the difference and sameness of primitive features and visual weight across elements conveys meaning about the elements and communicates information to the viewer. Schemas and Mental Models Information that moves from the internal to the external is top-down processing. We’ve seen a lot throughout our lives and we’ve taken in all sorts of information both verbal and visual. We can store it all, but we have difficulty retrieving it. To help us retrieve information when we need it, we organize it into structures in memory. These structures help us identify new information and make sense of it. It’s why when I say stop sign you probably see an image of a red, octagonal shape. You’ve seen enough stop signs to have them structured in memory with red and octagonal. The next time you see a red shape with eight sides you likely recognize a stop sign even before reading the word stop. Even if the word isn’t there, you probably still know to stop. The schemas and mental models we build create a context for all the new information we come across. If you and a friend experience the same scenes and events and come away with different interpretations, it’s because you have different schemas and mental models that influence what you see. Working Memory and Cognitive Load Working memory is where we map our surroundings and where we separate figure from ground as an entry into a composition. It's where we identify shapes by searching long-term memory for anything similar to the shapes our senses take in. It’s where we process and interpret and synthesize new information Working memory can only hold about four or five bits of information at a given time and it can only hold those bits for a few seconds. It takes great effort for working memory to process information. The amount of effort is called cognitive load. The more load the more difficult it is to process the information. Anything we can do to reduce cognitive load (don’t make me think) will make communication more efficient and more effective. The majority of posts in this series were techniques for reducing cognitive load depending on the type of information you’re trying to convey. Emphasize primitive features to move processing from working memory to pre-attentive visual processing Organize and structure information into chunks so working memory has less bits of information to process Reduce elements to their essential to remove visual noise and lessen what needs processing. A silhouette and a photograph can both communicate person, but the silhouette does so much more efficiently Add meaningful visual detail that complements abstract concepts and creates emotional appeal Align the structure of your information in similar ways to how your viewers have structured similar information in memory in order to help them interpret and integrate the new Again most of the posts in this series are about how to reduce cognitive load based on different types of information. If you take nothing else from this series, take this one thing. Then read through some of the posts again or for the first time to get the details on how. Summary Visual perception is a 2-way flow of information. What’s present at either end and what occurs in either direction influences the whole process. Designers can work with both external and internal stimuli to help guide viewers through a design and make the information easier to comprehend. On the external side we emphasize some of the features of elements to attract attention to them. We organize elements and information through these features to make everything easier to process. We reduce the irrelevant visual noise and add back meaningful visual detail to do the same. On the internal side we try to align our design with how we think viewers store related information. We design within the context of our viewer’s schemas and mental models. At times we purposely break from these structures in order to add interest and create tension that wants to be resolved. At either end of the process we have some measure of control over how our designs are seen and how the information contained in them is processed, interpreted, and synthesized. I hope you’ve enjoyed this series on visual perception and don’t mind the repetition of today’s summary. I’ve covered a lot of information these last few weeks and have hopefully reinforced the key points today. Download a free sample from my book Design Fundamentals. The post Visual Perception — Series Wrap Up And Key Ideas appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

Why It’s Still Important To Design “Above The Fold” - Vanseo Design

---

Why It’s Still Important To Design “Above The Fold” Posted: 22 May 2014 05:30 AM PDT When I was first learning to design websites, a frequent topic of conversation was the fold. I remember it being part of the very first class I took and it found it’s way into the discussion of several that came after. Is it still relevant? I think so. 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 Like I said it doesn’t get talked about as much as it used to. Somewhere along the way the general consensus seemed to be that there’s no such thing as a fold on the web so let’s stop talking about it. While technically true, when you dig a little deeper the reasons why the fold was so important still exist on the web and they’re just as important. I’d like to take a few minutes to discuss those reasons in the context of web design and more specifically responsive design. Responsive design is a paradigm shift from static to dynamic, from fixed to flexible, from absolute to relative. The fold is ultimately just one more thing that’s shifting and changing with it. This shouldn’t be seen as maintaining the literal implementation of a folded newspaper on the web as it is about understanding why the fold was important, whether the reasons still apply, and assuming they do, figuring out the best way to design for those reasons inconsideration of the new medium and the context the web provides. What is the Fold and Why is it Important? I’m assuming most of you are familiar with the concept of the fold and while that’s probably true, I shouldn’t make the assumption. Let’s spend a moment or two talking about where the the fold comes from. Before the internet many people got their news from one or more daily newspapers. Some still do, but hardly as many. A common place to buy the day’s paper was at the newsstand or in one of those vending machines where you could drop in some change to open the machine and grab a paper. The paper had a couple of jobs to do while sitting at the newsstand or inside of those vending machines. It needed to convince loyal customers that they should by that day’s paper and it needed to convince everyone else to buy the paper over all the others they might buy. The paper had to attract attention and then quickly communicate what’s inside and why it’s worth picking up. Non-visually it would do both by getting a scoop on the other papers. Every paper wants to break the big story and be the only paper covering it if possible. Some newspapers are folded vertically in half. The top half of the front page would be visible when the paper was in the rack or sitting on a table. Anything printed on the front page and above the fold was visible to passers by. Everything else wasn’t. Because the area above the fold was all anyone would see at first glance, it was essential to place the most important information, the information that would convince someone to buy in the available space. For most papers what you typically see above the fold are the paper’s masthead, the most important headline of the day, another lesser headline or two, some text, and probably an image or part of one. The masthead (like the header of a web page) became a recognizable shape so people can find their favorite paper. Hopefully the headlines were enough to convince you to buy that day. Enough information should be above the fold for someone to decide at a glance whether or not to pick up the paper and read more. Google image approximating the fold for various resolutions How Can You Fold a Web Page? The web is different from print. One obvious differences is we don’t literally fold web pages. The screens that deliver us digital content don’t like to be folded. I have no doubt that someday we’ll fold all sorts of screens and put them in our pockets, but right now folding digital screens tends to break them. Another difference is how near the competition is. On the web it’s only a click or two a way, but that’s a long time in comparison with the newsstand where the competition is only a glance away. There used to be an assumption that people didn’t scroll web pages. The thinking was they either didn’t know they could scroll or they just didn’t look beyond what was immediately in front of them. I highly doubt either is true today for the majority of people. With print everything is a known and fixed size prior to design. On the web you don’t know in advance the size of the canvas that will hold your design. That raises a big question. How can you place information above the fold when it’s impossible to know where the fold is? Years ago designers discussed what might be the best resolution to use and we did the same thing we did in general at that time. We’d assume the most common resolution and check the next couple or three most common to see what did and didn’t show initially. Designers used to rely on Google’s browser size tool for an image (the one at the top of this section) that could be overlaid on any web page to show how much information would be visible at different resolutions. You could then adjust elements if you needed to. We weren’t so accepting of what the web was back then. In truth worrying about the exact size of a browser window misses the point. The reason for designing above the fold was to make sure the most important information was seen at a glance. We can still do that without knowing the exact dimensions of a browser. On the web we can know that the top/left corner (top/right where reading is right to left) will always show no matter the device and resolution used. We can think of this point as the origin. The further something is from the origin, the more likely it won’t be seen initially. Visual Hierarchy When you think about it, it’s all just visual hierarchy. Make your most important information and elements the most visible. Attract attention to them and have them hold interest. With newspapers that meant placing the information above where the paper is folded, because the space above the fold is going to be the space that’s most visible. On the web you place that information as close as possible to the top/left (or top/right) corner. Your most visible information should do a few things. It should let people know where they are. It should let them know they’re in the right place. It’s letting them know they’re buying the paper they want. You should also let them know what else they can find on the site. If they aren’t on the right page now, maybe the right page is nearby. And you should let people know how to get to the right place once they know it exists. The specific page in question should answer a few questions. Who are you? Why should I care? Can I trust you? Information that answers these questions likely belongs above the fold or as close to the top of the page as possible. Ultimately you have to decide on the hierarchy of the page. You have to determine the priority of the content. Keep in mind if something is placed 1200px to the right of the top/left corner then only people who are viewing the page in a browser at least 1200px wide will see it. Decide how important the content is and if it’s ok for people viewing in something less than 1200px to not see it initially. Not everything needs to be seen right away. People visit your page for a reason. They’re looking for something. You want a main headline immediately visible that tells people what the page is about. This headline should probably match well enough to keywords or anchor text of incoming links to keep the scent and let people know they’re in the right place. While there’s no literal fold on a web page, the reasons why the fold was important for newspapers still exist for webpages. The information above the fold should attract attention. hold interest, and convince viewers to take action. The information should quickly communicate what the page is about and why visitors should say on it. The term above the fold may not make sense online, but the concepts behind it do. They just need a different implementation on the web. Download a free sample from my book Design Fundamentals. The post Why It’s Still Important To Design “Above The Fold” appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

Use The Efficient Power Of Emotional Design To Connect With Your Audience - Vanseo Design

---

Use The Efficient Power Of Emotional Design To Connect With Your Audience Posted: 19 May 2014 05:30 AM PDT Why do some designs evoke an emotional response where others don’t? Why is it that some designs make a connection with us and deliver meaning on a more personal level? Why do some sites wow us and quickly grab our attention and hold our interest? And perhaps most important, how do they do it? The last few weeks we’ve been looking at visual perception and the design principles that arise from it. Last week I talked about how we can make visually complex information clearer and easier to process. Today I want to talk about the last topic in this series and that’s how we can wow an audience and build an emotional connection with them through design. Note: This series comes mainly from the book Visual Language for Designers by Connie Malamed, which I encourage you to read. René Magritte, The Hesitation Waltz, 1952 Evoking Emotion Design is more than aesthetics. It’s more than how something looks, but it’s hard to deny that how something looks greatly influences how we feel about it, whether we buy it, how useful we find it, and the general experience we get from it. Designs that use emotion to convey a message resonate with more viewers Research consistently supports the idea that aesthetics can evoke emotion. When people look at pleasant or unpleasant images they have an emotional reaction, which is seen through increased activity in certain regions of the brain. When shown neutral images the same increased activity isn’t present. A design that conveys emotion can communicate immediately and on a visceral level. It’ll likely be seen as more interesting and it can capture the attention of the viewer before the content can be processed. Emotion drives a lot more of our decisions than many would care to admit. The emotional content affects us before our rational and cognitive processes kick in. Before we’re even aware it’s happening, the emotion conveyed is setting a context and influencing how our message is perceived and interpreted. Emotion, Cognition, and Attention Emotion and cognition work together to influence how we think and feel and act. Together they influence what attracts our attention, how we perceive and interpret what we see, and how it all ends up in long-term memory. Emotional imagery can influence perception by pairing something likely to be felt strongly (either positive or negative) with something that would typically be seen as neutral. The strong associations of one are connected to the other. Advertisers use emotionally positive and pleasant imagery in order to transfer those feelings to the product they’re selling Political candidates prey on the strong desire we have to avoid harmful and dangerous consequences by connecting feelings of fear with the opposition. Associations like the two above can be very effective when trying to persuade. Positive information tends to be processed more efficiently and accurately, is held longer in memory, and is easier to recall. Remember though, that the avoidance of negative consequences can be very strong in persuading people to take action. Imagery that’s meaningful and emotional captures attention and generates a state of cognitive arousal. Most people find boredom unpleasant and find stimulation and activation to be pleasant. One theory holds that people prefer an optimal state of activation and seek to maintain it by looking for change and the new. Emotional experiences help maintain this state and emotional graphics hold our attention until we can process the information they contain. When the emotional content isn’t present people leave to look for it elsewhere. How to Visually Communicate Emotion Hopefully the above has convinced you that emotion as a powerful and effective way to communicate your message. The question now is how do you do that? How do you effectively communicate emotion and set a context before cognitive processing can begin? There are a handful of strategies we can try. Make Emotional Features More Prominent As we saw earlier in this series, primary features like color, size, and shape can be made to pop out against a background. You can similarly make emotional content stand out against emotionally neutral content. Of all the primitive features, color has the most potential to evoke emotion. Think about how many ways we use color to describe how we’re feeling. We feel blue when sad and can become green with envy. We’re yellow when we lack courage and red when filled with anger. The values of different aspects of color can communicate different emotion. Cool colors are calming Warm colors are energetic Highly saturated colors are felt more intensely Lighter colors are typically associated with positive feelings Darker colors are typically associated with negative feelings Between hue, saturation, and value the latter two probably convey a greater emotional impact than the hue. Color schemes that vary saturation and value tend to be more effective at communicating emotion. Tension is another way to communicate emotion. For example shapes that are difficult to identify create tension. A viewer will feel the need to resolve the tension, or be left with an unsettling experience. Tension can be created through the exaggeration of forms, colors, and textures. Broken expectations create tension. Anything that makes closure more difficult can also lead to tension. Strong imagery is another way to make emotion stand out, especially in photographs or drawings of the human face. We’re attuned to facial expressions and we follow the gaze of an eye. Expressive faces capture our attention and are more memorable later. We can use symbolism to communicate emotional content and represent abstract ideas. We learn to associate many symbols with social value and as a result many acquire emotional meaning. Concepts like religion, justice, and social status can be communicated through symbols and icons alone. Create a Visual Narrative Human beings are story tellers. We’re familiar with narrative from an early age and we naturally communicate with each other through story. We have vicarious experiences reading, listening, or watching a story unfold. It’s the emotional impact of a story that carries us through it more than the plot. People will watch a movie with little plot and poor acting if the emotional impact is strong enough or resonates with them personally. Studies show than when consuming a story people imagine their involvement in different scenes. This triggers areas of the brain to prepare for physical action. Our brains react to stories as through they were physically occurring. A visual narrative shows a sequence of events or actions connected emotionally and with conceptual continuity. Think panels in a comic book, but also think about unity in design and keeping everything consistent with an emotional theme. Narratives often follow a formal structure of beginning, middle, end, which I’m sure is familiar to you. Make Use of Visual Metaphor When something is difficult to get across, we often use metaphor to communicate it. Metaphor helps transfer what we know and feel about one concept to another. If you think about it, our entire cognitive system relies on metaphor. We build schemas and mental models that serve as metaphors for any new information we encounter. The metaphor helps us process and interpret the new. As with any metaphor, what’s known about one thing gets transferred to another. You can make a visual metaphor more powerful by combining and juxtaposing multiple images and concepts. Consider the car company Jaguar. The name of the company is a metaphor and the company logo (above right) expresses the metaphor visually. It depicts a jaguar (the animal) leaping in a display of power and speed, both of which are meant to be transferred to the car. Create Novelty and Humor with the Unexpected When we come across something unfamiliar or out of context it creates an emotional response that captures our attention and increases our interest. The greater the intensity of the emotion, the greater the attention and interest. Novelty is new and unusual and it holds our attention because it conflicts with the schemas we hold. The inconsistency is interesting because it requires processing to understand. We need to resolve the inconsistency. Unusual juxtapositions, perspectives, and themes create novelty. When the inconsistencies they generate are moderate we tend to have a positive reaction to them. When the inconsistencies are extreme we’re more likely to be confused. Humor is a form of novelty that evokes feelings of amusement and enjoyment. Messages with humor are usually thought to be more interesting than those without. Humor can shock, entertain or amuse and is usually created by: Deviating from the expected Creating inconsistencies that can be resolved Showing contrast between the typical and the unanticipated Humor does need to be handled with care and taste. Not every message can be communicated with humor (or novelty) and not everyone appreciates serious topics being treated in a light-hearted way. Depending on the combination of subject matter and audience, humor may or may not be appropriate. Humor can also be hard to get across. Different people find different things funny and it’s possible that humor can be interpreted in unintended ways that reduce the effectiveness of communication. Summary Emotional design can be a powerful and effective way to communicate. It’s conveyed before cognitive processing begins and can be communicated immediately and viscerally. It can wow and it can delight. Emotion attracts us and holds our attention. It sets a context for everything that comes after and it influences our decision-making. Strong emotional responses, both positive and negative, are often associated with and transferred to a more neutral product when imagery of both is paired. We can increase the impact of emotional visuals by making them prominent, connecting them in a consistent narrative, making use of visual metaphor, and incorporating novelty and humor where appropriate. Designs that use emotion to communicate will usually resonate with more viewers on a personal level and create stronger and more lasting connections with them. That wraps up the last of the topics in this discussion of visual perception. Next week I have one more post to add based on some thoughts and observations I’ve had throughout writing this series. Consider it something of summary for the series that highlights most of the key points. Download a free sample from my book Design Fundamentals. The post Use The Efficient Power Of Emotional Design To Connect With Your Audience appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

Is Your Best Work For Yourself Or For Your Clients? - Vanseo Design

---

Is Your Best Work For Yourself Or For Your Clients? Posted: 15 May 2014 05:30 AM PDT I recently heard someone say that you don’t get to do your best work for clients. Is it true? Can you not do your best work for clients? How exactly do you define and know what your best work is? 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 Today I want to talk a little about working for clients and working on your own projects and think out loud about which provides greater opportunity for doing your best work. Working for Yourself When I work for myself I get to play every role in the process. I get to make every decision and I can do anything and everything I want. I get to take every step toward the finish line and design and develop a site however I think best. If I only have to answer to myself I can put more time into the details and even spend time shifting things a px left or right and strive for perfection. I usually start with a plan, but I can and do veer from the path I’ve laid out at any point to see where it leads. I can take detours and experiment with any idea I want without fear of going over budget. If I don’t think the site is finished I can hold back the launch. If I think it’s ready sooner I can launch early. There’s no budget in the sense that I’m not locked into anyone’s time frame. I can’t necessarily spend anything I want, but the majority of costs are my time and that has no arbitrary limit. Working for myself doesn’t mean I’ll do all the things I want, but it means I can. I get to do my best work in the sense that I get to try everything I think will help me create the best design I can and I get to make the ultimate decision on everything. When I’m my own client I get to take time and money of out the equation for the most part so the only thing left is to work on the quality. With one person in charge and making every decision the finished site should show more unity and follow a clear and single vision. Making all the decisions and exploring every avenue I want doesn’t mean I automatically do my best work. I have received great suggestions from clients that improved their site immensely. Is that my best work then? I’ll always have the most passion working for myself. No matter how good a client project, it’s unlikely it’ll ever mean the same to me as one of my own sites. It doesn’t mean I can’t feel passion for a client’s site, but all else being equal I’ll feel a greater sense of purpose and want to put more into a site that’s mine. With every decision the client makes that’s different from the decision I would make, the site becomes less mine and more the client’s. Working for Clients I don’t know about you, but I’ve never gotten to do everything I would want to do on a client’s project. That’s in large part due to budgets. Clients have budgets which immediately constrains all the things you can do. I may think it best to hire some people to test the design in progress, but if the money isn’t there to hire them, then it won’t happen. Constraints are important. They’re essential for design. They do tell you what you can and can’t do. A budget immediately sets constraints, some of which may keep you from doing your best. A budget adds constraints you might not have added without the budget. They’re constraints imposed by someone else. Clients aren’t looking for your best work. They’re looking for the most value they can get for their money. They’d like your best, but happily accept less to not have to pay for your best. It often means you’ll go 85%, 90%, 95% of the way toward your ideal and leave you skipping that last 5–15% It could mean skipping a layer of fine details or having to leave out a feature. The lower the budget, the less you’ll do that you’d ideally like to do. The greater the budget, the closer you can get to your ideal and the more time you can strive toward perfection. You have more time to explore and do what is your best work. Working with clients is more of a collaborative process. It certainly has been for me the last couple of years. Unless the client is me or thinks exactly like me and would make the same decisions as me, I’m going to do some things I disagree with. It means having to do things I don’t think my best work. The goal when working with clients is to do the best work you can do together. The goal is to do the best work you can in collaboration. Perhaps my best work for clients is an evolving process which helps get the most of the collaboration between client and myself. What’s Your Best Work? I’ve danced around some important questions. What is your best work? How do you define your best? How do you know when you get there? Is your best work really about doing anything you want and exploring every possibility? Is it the work you do in collaboration? Maybe we think our best work comes about when we’re 100% in charge, but the reality is the sites we design for someone else turn out better than the ones we design for ourselves. Maybe conflict while working with a client ultimately drives you to do better work. The result may be different if there were no client, but the results might be better with the client. The client could challenge or anger you enough to motivate you to show the client who knows best. Clients can offer new avenues to explore that you haven’t considered on your own. A collaborator who complements you could bring out your best. They might strengthen your strengths and improve your weaknesses. Perhaps you have greeter potential working for yourself because of all the singular control, but you do your best work under budget and deadline. Maybe you need the constraints to do your best. Clients might offer you better projects increasing your potential to do your best. Their sites might offer more opportunity to show what you can do than any of your own projects. Odds are the projects you select for yourself are aligned with your strengths. A client might offer you a project that challenges you to grow by improving your weaknesses. I would think designing the whitehouse.gov site would be more challenging than anything I would build for myself and present opportunities to do more and do better. A site like that could get more out of you because so much has to go into it. It could bring out your best despite how much less control you inevitably have over what you do. In the end I don’t think there’s a one size fits all answer to the question of when you do your best work. I feel like my best work does come when I work for myself. I think it comes when I get to make the decisions and take the risks I think best. I think it comes when I get to experiment how I want, without fear of going over schedule or budget. I think it leads to my most unified designs because every decision arises from a single voice. My clients tend to be micro businesses and individuals. They’re unlikely to ever send me a project like whithehouse.gov. Their budgets constrain projects in ways that generally won’t lead to my absolute best work. That’s not to say I can’t do great work for clients. I generally end up with a site I like and more importantly that my clients like. Still there will always be things I thought would work better, but the client overrode my decision. If you have different clients you might get to experiment more and make more decisions and do more of the things you think lead to your best work. Ultimately I think your best work is making the best decisions you can within the context with which you work. The specifics of the project set theoretical limits on how good your work can be, but they don’t determine what is or isn’t your best. Is your best work your best design or your best design within whatever context you’re working? In sports the manager or coach of the year usually isn’t the one who’s team saw the best results. It’s more often the manager who was seen as getting the most out of the team. It’s the manager who exceeded expectations the most. Working for yourself or working for a client is like being in charge of different teams. You can do great work for either. What constitutes your best work changes from project to project. The project and client determine what your best can be under the circumstances. The context of the project and the constraints from the budget and client preferences set a range for how good your work can be and they provide the means for measuring, quantifying, and qualifying. Once that range is set it’s up to you to do your best work. Download a free sample from my book Design Fundamentals. The post Is Your Best Work For Yourself Or For Your Clients? appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

How To Make Visually Complex Information Easy To Understand - Vanseo Design

---

How To Make Visually Complex Information Easy To Understand Posted: 12 May 2014 05:30 AM PDT Our world is complex and it shouldn’t be a surprise that visually depicting a world of complex objects, systems, and processes leads to some rather complex graphics. Simplifying should be a first step, but sometimes all that complex information needs to remain. How can we help people understand our message despite its complexity? The last few weeks we’ve been looking at visual perception and the design principles that arise from it. Last week I talked about making abstract concepts concrete through the use of graphs, diagrams, infographics, and other visual displays. Today I want to talk about how we can clarify complex information and make it more understandable. Note: This series comes mainly from the book Visual Language for Designers by Connie Malamed, which I encourage you to read. Exploded view drawing of a mechanical system by Leonardo da Vinci What is Visual Complexity? What does it mean for something to be complex? Like so many things design, it depends on what that something is. Numbers — are complex when they contain both real and imaginary components Systems — are complex when they’re composed of many interdependent parts Tasks — are complex when they take a great deal of cognitive effort to complete Information — is visually complex when it’s densely packed and lacking structure Complexity can be subjective and based on the perception of the viewer. In a sense complexity is in the eye of the beholder. If your relevant skills, knowledge, and abilities don’t align with a task, that task likely seems more complex than if your skills , knowledge, and abilities aligned with it. The more complex the information, the greater the cognitive load required to process it. Complexity can also be subjective based on the moment. A viewer might be distracted and his or her attention might be divided on more than one thing. If the viewer is distracted by something in our design, it’s something we can correct. If the viewer is distracted with something in his or her personal life there’s not much we can do. In either case tasks will be more difficult to complete and the information will be more difficult to comprehend. Graphics that attempt to explain complex concepts are unsurprisingly complex and information rich. There’s a lot to communicate with complex information and meaning can be conveyed through details, patterns, shapes, text, color, and other design elements. Many will likely be needed and used. Because there are more elements to identify and process, it takes longer to search through a complex graphic and locate what you’re looking for. One tracking study found (PDF) that visually complex web pages lead to more scattered and disordered eye scanning paths than those with fewer elements. That suggests we should reduce complexity and remove as many elements as we can. Unfortunately sometimes all those elements are necessary to fully explain something complex. Sometimes we can’t reduce complexity and should strive to clarify it instead. Cognition and Complexity People rely on previously held knowledge to understand complex information. We lean on schemas and mental models to perform cognitive tasks and to integrate new information. Schemas are often built from fuzzy and incomplete information. Sometimes this leads to conflicting and illogical concepts being stored, which places great demands on working memory and can cause cognitive dissonance. To reduce dissonance we continue to refine our schemas in the presence of new information. We gradually build them up into larger structures. We construct mental models based on our schemas, which become broader and more general representations of how the world works. Two ways we can help our audience build more accurate mental models are through coherency and context. Coherency — is about consistency and unity. It’s about everything in the explanation being meaningful and making logical sense. Context — is about the framework within which new information is integrated. Coherency might involve cause and effect or steps in a process. It contains a structure that simply makes sense both visually and verbally. You can help viewers by removing irrelevant information and increasing visual unity Context sets expectations and can help guide viewer’s attention. Context influences what will be noticed and how it’s meaning will be interpreted and incorporated back into long-term memory. Something seen out of context doesn’t make sense and can lead to confusion. Providing context helps viewer’s understand the concepts being communicated. How to Clarify Visually Complex Graphics There are several approaches you can use to help viewers build and refine more accurate schemas and mental models without overloading them. Segments and Sequences — present information in chunks instead of all at once Specialized views — show hidden components Magnification — show increased detail Implied motion — suggests motion in static pictures Inherent Structures — a structure that makes conceptual sense will complement the information and the visual processing of the viewer Segments and Sequences Complex information is difficult in part because it comes with so much information. Showing everything at once requires a lot of cognitive processing, which can reduce comprehension and cause viewers to feel overwhelmed. Better is to segment the information into smaller, digestible chunks and when appropriate show it as a sequence with beginning, middle, and end. Pace the information instead of trying to present it all in an instant. Human beings naturally divide information into manageable parts. We add chapters to books. We categorize content on a website. We create catalogs of products that can be sorted alphabetically or by price. Segmenting information complements our natural cognitive processes. Information divided into small, but meaningful chunks is easier to manage in working memory and easier to incorporate into long-term memory. It reduces cognitive load and the overwhelmed feeling that might come with it. By presenting simpler concepts first and then progressively disclosing more complex information to build on the simple, we help viewers gradually build schemas and mental models. We want viewers to recombine the chunks into a unified and coherent whole as they become schemas and mental models. To help that process we can: Show the big picture to provide context Introduce the core concepts early and then build on those concepts Provide visual continuity to the information and connect segments to direct the eye through them A sequence is type of segment shown in chronological order. Sequences can be effective for showing procedures, cause and effect, a series of steps, or any idea or concept that builds on previous ideas and concepts. Sequencing naturally connects and groups important visual information together. The group is represented as a single unit in working memory and increases the odds it gets encoded as a single group into long-term memory. It leads to reduced cognitive load, quicker processing, and greater comprehension. Specialized Views Sometimes the information we need to understand a system or structure is hidden within it. Specialized views allow us to make this hidden information accessible. They allow viewers to see through and inside the structure. Interior views as you would guess show the interior of the system. They remove an area on the surface so people can see what’s inside. Cutaways — remove the surface of a particular area and are usually rendered to make it appear as though you’re seeing through a window or tear. Cross sections — show an object cut at right angles to its axis Transparent views — make the exterior of an object invisible to show the entire internal structure Exploded views show components of a structure arranged correctly, but separated along a common axis. They show how all the components fit together as well as their details and relationships to each other and the whole. The components in an exploded view might be moved out of alignment to better fit the layout. Flow lines are used to show where each part belongs in the overall assembly and callouts are used to show component names. An exploded view conveys the structure of the object or system. The function of the components can be shown with the addition of arrows as can movement through the system. Magnification At times more detail of a specific area or component is necessary to understand it. We can magnify those areas and components to show an increased level of detail that calls attention to its most important aspects. The detail is usually enlarged and arranged as an inset. Moving it away from the main graphic can help call attention to it and highlight it. Lines, arrows, or a zoom effect keep it connected to the whole. Magnifying some areas has the advantage of the main graphic being there for context. The main graphic presents the holistic view and the magnified areas offer the specific details. Implied Motion Specialized and magnified views are great, but they’re also static. They don’t show the the motion of a dynamic system, which might be necessary to explain: How the system works How the structure is assembled Unseen forces that act on the system. If the graphic is interactive you can build movement into it. For graphics that are static we can imply motion through one of several techniques. Motion lines are a streaking lines behind an object to indicate speed and direction. Studies show them to be effective at conveying an impression of quick movement in a given direction. Stroboscopic movement simulates movement by presenting a progression of images similar in size and shape, but differing in position. Think panels in a comic book. This difference in position creates a rhythm of motion. Action arrows as we’ve seen in prior posts are a good way to show movement and direction. To show action the arrows might be curved and they typically depend on the overall context to be understood. Motion blur can be used to show movement. It’s commonly used in photographs, but it has the disadvantage that in blurring some details might be lost. Inherent Structure Nothing exists or is perceived in isolation. Everything is part of some larger context and comprehension comes from understanding how parts are connected and related. The structure of an object or system can express meaning by revealing these relationships Memory for content improves when the information is organized spatially. It allows features like shape and color to be encoded along with the semantic structure making the features easier to integrate and later retrieve. A structure is more than just ordering elements aesthetically. Ideally the structure will arise out of the meaning of the information being conveyed. One approach to organizing and structuring information comes from Saul Wurman and is known by the acronym LATCH. Location Alphabet Time Category Hierarchy (Continuum) These are sometimes referred to as the 5 hat racks and each is a different way to organize information. They’re especially helpful for organizing large amounts of information and are generally familiar to most everyone. Different information naturally calls for different types of organization. News items want to be organized with a time component. Places want to be organized by location. Last names want to be organized alphabetically. The way you organize information influences how the information is taken in and processed. Using an the organization that makes conceptual sense will help viewers comprehend the message you’re trying to convey. Summary Simplifying complex information should be our first step in dealing with it. There comes a point though, where all that can be removed has been removed and what’s left is still quite complex. The more complex the information, the greater the cognitive load required to process it and the greater the chance for dissonant ideas to conflict. We can help clarify complex information in a number of ways. We can segment and/or sequence the information to make it easier to process. We can present various views that allow viewers to see hidden information. We can magnify some information to make details clearer. We can show implied motion on static pictures. Finally we can choose a structure for organization that complements the information being communicated. Each of these techniques will help you explain complex information and will help your audience process and comprehend the message. We have one more topic to cover in this series and that’s what we can do to make an emotional connection with an audience? How does that emotion help attract attention to important information. How does it influence the way the message is perceived and interpreted? We’ll get to the answers next week. Download a free sample from my book Design Fundamentals. The post How To Make Visually Complex Information Easy To Understand appeared first on Vanseo Design.

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610