It’s cool times on the web today as new technologies emerge. Fonts have always been a hinder to websites as compatibility isn’t world wide. Not everyone has your favorite Wingdings font so for the longest time, web developers were stuck using so called “web safe” fonts. These are fonts that are most common on everyone’s computer from Microsoft Windows to Apple to even Linux. By sticking to the core fonts you can rest assure everyone will see your website the same way. But now we introduce font systems like Cufon, Typekit, FLIR, and sIFR and we see a whole new way to customize the visual experience without the worry of them having or not having that font.

Let’s break down the benefits of each of these font systems and give a few pros and cons. It is important to understand, there is no “best” solution for everyone, but hopefully this article can help you explore the possibilities.

Good Times or Bad Times?

For anyone who doesnt know already, web browsers rely on the fonts installed on your PC in order to render them on the screen. Even “web safe” fonts are not strictly the same from computer to computer. Times New Roman on a Windows 7 machine isn’t going to be the same typeface as Times Roman on an Apple.

Depending on other factors (some people love installing lots of fonts), even the same font name on two installations of Windows might not be identical, especially if the default system fonts have been over-written with commercially purchased alternatives – so the differences in default tracking, kerning and other nuances may serve to create an inconsistent result – especially if you are using type at display sizes, and need finer control.

Please note that all of the methods we are looking at off excellent accessibility for text readers – even the Flash based sIFR. Also you must ensure that you own the license for the font you wish to use before going forward as  not all font systems allow unlicensed fonts plus its illegal and could get you a hefty fine.

Now let’s dive into the ways you can pimp your website.

sIFR – Scalable Inman Flash Replacement

Mike Davidson created sIFR as an open source JavaScript and Adobe Flash dynamic substitution system. It is based upon the original HTML text-to-flash replacement pioneered by Shaun Inman. Now several years old, it filled a gap for many, and continues to be used by many.

You can read more about sIFR at the developer’s website http://www.mikeindustries.com/blog/sifr

Advantages

• You can effectively embed just about any font you own (not just Truetype) by creating your own flash “font library”.
• Final output looks as beautiful as any Flash generated typography.
• All files can be retained locally on your server – no links to external service providers are needed to render your fonts.

Disadvantages

• Harder to configure due to the requirement to build the Flash font library.
• sIFR needs JavaScript and the Flash plugin to work. If either is disabled or missing, the reader’s browser will fall back to traditional CSS based styling.
• sIFR is not ideal for body copy due to the processing requirements. Although this is not such an issue with today’s machines, it’s far from ideal for slower machines.
• Being flash based, sIFR may be vulnerable to add blockers, and other browser plugins that block Flash content. Oh, and of course, Flash won’t work on current iPods, iPhones, or iPads.

FLIR – Facelift Image Replacement

FaceLift Image Replacement is similar in concept to sIFR, insofar that javascript is used to replace html text on the fly. Instead of replacing text with Flash, it is replaced with 32bit bitmap PNG images, generated on the fly via a server side PHP script. The results vary, especially with more elaborate fonts, depending on which PHP module is being used to generate the output (usually GD, but ImageMagick can give better results).

You can find out more at the FLIR website – http://facelift.mawhorter.net/

Advantages

• Does not require Flash to work
• Any Truetype/Opentype compatible font can be used.
• All files can be retained locally on your server – no links to external service providers are needed to render your fonts
• Easier to set up than sIFR
• Configurable via plugins and config php file

Disadvantages

• Relies on PHP to render the output – character spacing sometimes requires tweaking.
• Places extra processing and caching load on the server – which can create large numbers of files.
• The final output, being a bitmap, is not readable as text, and therefore reduces accesibility unless javascript is disabled by the user.

Cufón

Cufón, once again, uses javascript to replace the html fonts, but in a far more elegant way. The initial step in using Cufón is to generate a proprietary font library, which is effectively an SVG font embedded in a javascript file.

Generating this file is a relatively painless process, requiring the upload of your desired  font from your computer to the Cufón website and choosing some options before it gets “Cufónised” and downloaded back to your computer as a compressed javascript file. This file is then placed on your webserver.

The rendering engine for Cufón involves 3 components. A core API, and two rendering engines, one for Internet Explorer (which almost directly reads the VML data from the javascript font library), and another for browsers that support the HTML5 <canvas> element. Both renderers are very efficient and fast, and simple to install.

Cufon can be found via the project website – http://cufon.shoqolate.com/generate/

Advantages

• Client driven – no extra burden on the server other than to download the initial Cufón framework.
• Able to vary the quality/speed ratio of the font library file’s produced.
• As fast as your browser can render.
• Reasonably screen readable (although see below) by sight impaired.
• Any Truetype/Opentype font can be used.
• All files can be retained locally on your server – no links to external service providers are needed to render your fonts.

Disadvantages

• The basic installation only allows fonts to be assigned to basic html tags, and relies on external selector engines, such as jQuery, MooTools, Prototype or Dojo to assign fonts to other selectors – not a biggie, and is well documented.
• Generates a lot of extra DOM objects (specifically <span>) on the fly, which has caused issues with various screen readers, making accessibility a little more problematic. Again, not a show stopper, but not perfect.

Typekit

Typekit leverages the @font-face CSS rules that despite having been bounced around for almost 10 years, have only recently been supported in a consistent way by the big browser developers. @font-face is a major step forwards in many ways because instead of trying to patch a gaping hole in the capability of web browsers, it has aimed to actually fix it by building the functionality that we have all been screaming out for.

Working with Typekit is about as painless as it gets – Which is why yours truly has opted to use it on this website. Once you have signed up with Typekit, (they even have a free account option with a respectable set of fonts available), you create a “Kit” – a Kit defines the domain name, and fonts to be used. Once the Kit has been published on the Typekit system, all that remains is to add a couple of lines of javascript to your site, and you’re away. Typekit can even automatically replace CSS selectors with your new fonts for you – or, you can use them in the normal font-family CSS rules as you would with any typeface.

The FOUT issue (Flash Of Unstyled Text) is one of the only real problems with using Typekit. This is due to the time taken for javascript to load up the new font data, and replace the fallback fonts on the rendered page. It’s a little unfair to level this argument solely at Typekit, because every other method also takes some time to do the switch (anyone with experence of sIFR will know this).

Typekit are very aware of this, and recently produced some extra documentation at http://gist.github.com/401726 on “Typekit Font Events”, to help developers control what happens at load time (most opting to simply not show anything until the system is ready – like the other web font substitution systems) – but it is impossible (currently) to avoid this issue.

However, this is probably outweighed by the superb accessibility this system offers, as no extra un-necessary inline <span> elements are introduced to achieve the results, keeping your markup semantically correct.

Advantages

• Does not alter your HTML markup – maintaining excellent accessibilty, and copy/paste ability.
• Very simple to implement – and I mean SIMPLE!
• Futureproof – as Typekit improves, so will the javascript they put on your page – minimising future maintenance worries.
• A growing library of legally available fonts, so less hassle for designers.
• At $50 a year for unlimited domains and fonts, and 500,000 page serves a month, it’s unlikely to break the bank. I was going to put this as a disadvantage, but it’s only fifty bucks.

Disadvantages

• Relies on font data stored externally (albeit on super-fast, geographically dispersed sources).
• Hiding the base content until the javascript switch has taken place needs to be coded in on top the default install.
• It’s $50 bucks a year.

My Conclusion

So with these different font systems the best I found with the most compatibility and accessibility would be the Typekit font system. Most importantly, it does not need Flash, or extra server time to create “quasi-text” with bitmaps. Typekit’s use of @font-face is the most forward thinking solution, and I’m sure as time goes by it will develop into an even more elegant form of web font delivery. The only drawback is the fact that it uses javascript to load the fonts thus increasing your page load time.

The standard is going in the right direction, but fonts still need to be loaded before everything else so that the DOM has access to them as soon as it initialises – and this is going to require some further co-operative thinking between W3C, and the browser developers, and I’m sure it will come in time.

Benzing Web Design Marketing

Customizing Facebook has always been a drag because of the unified styles they insist on holding. Limited customization is however available. This is why we created MyFanSite application for Facebook. It’s provides an easy interface for web designers to customize a tab on their profile or fan page and give it a little more edge.

So let’s get started.
If you want to add it to your personal profile you must approve the application by visiting http://www.facebook.com/apps/application.php?id=105603572335 and click on ‘Go To Application’ it will require you to login and allow the application to be added. If you want to place it on your fan page click in the top left menu where is says ‘Add To My Page’ then add it to your fan page from the popup box.

Once you approved it then it will bring you to a screen like so:

On this screen we see our details and a bunch of different boxes. The only fields you need to pay attention to are ‘Background’,'Font Color’,'Background Color’,'Stylesheet’, and ‘Content Box’.

Now to customize your page you need to first design a cool custom background. The size is 760px W x 775px H once you have your background design go ahead and upload it. My example background is below:

Ok so we have our background and it’s uploaded lets test it out. The first thing you need to do is edit the application settings to show the tab on your profile or fan page. This is done very easily two ways depending on how your setting it up. Goto ‘Applications->Edit Applications’ from your facebook toolbar if your placing it on your profile or if you are using it on a fan page you will need to click ‘Edit Page’ from your fan site then scroll down to find My Fan Site and click on ‘Application Settings’. Once clicked it will popup a box which will allow you to add the tab to your page. It should look something like below:

I must also mention this page above is also where you will ‘Edit’ the Fan Site as well. Now that we have it approved a tab on your page should appear which says ‘Fan Site’ and the page should load your custom background cool!. Now comes the fun part…More Customization!

So as I mentioned before the Stylesheet box and Content Box being important, are next.

Make sure you DO NOT add <style></style> to the Stylesheet Box it will automatically add them. Let’s start with some simple code place this in your ‘Stylesheet’ Box:

1

#content-box{position:absolute;width:200px;margin-top:343px;margin-left:66px;}

This code above will position our ‘content-box’ 343 pixels from the top of our uploaded design and 66 pixels from the left of it. So if you have certain areas you want to feature text you can do so by positioning them around your background design.

Make sure your css is all one line of code for optimum performance of your fan site. Sometimes I notices issues with link breaks. Now let’s add our content. In the ‘Content Box’ we add the following code:

1

<div id="content-box"><h1>Test Title</h1><p>Testing some content</p></div>

Then click ‘Save Settings’ or ‘Create Fan Site’ if you just added the application. Your settings will be saved and your fan page will be customized with some text positioned over your design. This is however very basic usage of this application and as we grow it into something even more special this tutorial should get you on the right track.

Check out our Facebook Site and Become a Fan: http://www.facebook.com/benzingtech

Related Blogs

• Related Blogs on Customizing Facebook using MyFanSite Tutorial

Benzing Web Design Marketing

With the internet expanding rapidly coming up with new creative designs can be a daunting task. That’s why we created a website to help do just that, inspire designers. WebInspir.com is a web 2.0 designer inspiration website. Where online designers can submit their creativity to inspire others. Designers can vote on top designs and we took into consideration the SEO aspects of the website and made sure every page is properly optimized and indexed by the search engines.

So get creative and submit your next design! http://www.webinspir.com/category/submit/

Benzing Web Design Marketing

Customizing social media pages is an important factor for designers, users, and social media marketers. The ability to create custom backgrounds and designs for myspace, twitter, etc. can become a lucrative business model for savvy designers and developers.

Compared to many other social networking sites, Myspace offers the most flexibility in the layout and design of a profile page. They provide a ton of customization options and make it easy to get a new look quickly.

There are some prerequisites before we jump into a fully custom design. You will need a photo hosting site account like flickr,photobucket,or picasa. This will host your background images or other media you want to put on your profile.

Let’s create a professional-looking page with the new Myspace 2.0.

Once you sign-in to your account, you’ll click to edit your profile.

Now, make sure that your profile is set to MySpace 2.0. If you already upgraded then you can skip this step.

You’ll now easily be able to browse around and interact with the theme editor at the top of the page. This is where the magic happens and you should play around with different settings to get the feel for how it works and what each selection in the theme editor does.

Now you can choose to use the themes that Myspace offers or upload a custom Myspace theme.

This is where your design skills come in handy and the creativity runs wild. To upload your professional Myspace theme, paste your own CSS code into the appropriate box. Don’t know how to write css? no problem. Get a brush up on CSS at W3Schools.

Make sure that you’ve clicked in the appearance box that you don’t want to choose a layout. Then input your CSS code in the textbox as seen above. Once you know what CSS is and have an idea on how to code it you need to know what codes in MySpace can be modified. Below is an example blank 2.0 CSS file:

/* body, main font properties, background of page */
body{
  background-color: #f8f8f8;
  font-family: helvetica, arial;
  font-size: 11px;
  color: #333333;
}
 
/* width of profile, second background color */
div.wrap{
  width: 60%;
  background-color: #fff;
  border-left: 1px solid #878787;
  border-right: 1px solid #878787;
}
 
/* header & navigation properties */
div#header, div#googlebar {background-color: #878787;}
#topnav {background-color: #878787;}
#topnav a {color: white;}
#topnav ul, #topnav ul li {border: none;}
#topnav ul li a:hover {background-color: #6C6C6C;}
 
/* global module properties */
div.moduleMid1 {background-color: #EFEFEF; padding: 5px; border: 1px solid #AFAFAF;}
 
/* basic details */
div.profileDemographics {background: white; border: 1px solid #AFAFAF;}
 
/* Interests, Blog Entries, Details, Friend Space & Comments */
h3.moduleHead{
  font-weight: bold;
  font-size: 16px;
}
 
/* general, music, status, ethnicity */
strong, h4 {font-weight: bold; color: #333333;}
 
/* link properties */
a:link {color: #333333; font-weight: bold;}
a:hover {text-decoration: underline;}
 
/* odd/even properties */
.interestsModule .odd, .detailsModule .odd, .commentsModule .odd {background-color: #F7F7F7;}
.interestsModule .even, .detailsModule .even, .commentsModule .even {background-color: #EBEBEB;}
 
/* footer properties */
div#footer {font-size: 10px;}

If you want to hide boxes and elements on your profile MySpace 2.0 Codes has a great reference of information to help you out. And a tutorial from Skeedio should get you up to speed on modifying the css files for MySpace 2.0

Once your done, click to publish your profile. Once published, click to view your profile and your Myspace page should appear like so:

Related Blogs

• Related Blogs on myspace
• MySpace Trawl – Nedry | Hecklerspray
• Dallas Clubs

• Related Blogs on Social Media
• Social media, brands and the way forward

Benzing Web Design Marketing

Searching for the next best article to read. I came across a post from Experience Matters by Allyson Hohman. She gives some great information to make you question if your brand is on demand.

She says “Listen to your audience. Get to know what they really feel about your brand. No, what they REALLY feel. You may be surprised what you hear – good and bad.  There are some free social monitoring tools that can help with this process, but if you only listen for a small amount of time you will find yourself back at square one sooner than you can tweet about the experience. Build a solid foundation for the future. Take the time and invest in a tool that will help you get ahead.”

The creation of an On Demand Framework is key.

So what is “On Demand”?

Being equipped with the right messaging in the right place when the consumer chooses to engage is being ON DEMAND. So how do help with that? Social Media of course…Join the bandwagon.

Be…

1. Insightful – Know your audience. What do they like? What is their online behavior?
2. Remarkable – Stand out from the crowd. Use emotion to connect with your audience. Let them know you understand them and can make their lives easier and/or more enjoyable.
3. Valuable – Getting someone to engage with your content is the first hurdle, but how do you get them to return or engage with you again? Give them something of value. Make it about them, not you.
4. Dynamic – “2.83 million pieces of new content are posted every day.” (Nielsen BuzzMetrics) Don’t be part of the clutter; create a path that is uniquely yours.
5. Portable – Engage with the consumer wherever they are, at any time. Consumers are looking for you – be there to greet them.
6. Conversational – Online media has transformed into a social and interactive experience. Brands must participate in the conversation. Consumers now expect it.
7. Everywhere** – Consumers don’t see the difference between channels. They do not care nor do they want to understand your online strategy.  They just want to find what they are looking for when they want it. Simple. Be where your consumers are. Use insights to make these decisions.

Do you really need to be everywhere?

No, but If you want to have a long lasting relationship with your audience, then you must understand where they spend their time online, how they use each channel and why they use each channel. Perhaps in your business this is everywhere.

Use the three P’s as a reminder.

Penetration – What’s the penetration of a channel against the target audience?

Perception – What is the consumer perception of a channel among the target?

Potential – Can we successfully market to them in a particular channel?

If you always start with the customer, use the On Demand framework and consider the 3 P’s, you can place your bets and win every time.

If you need a brand overview feel free to call us.

Related Blogs

• Related Blogs on Is Your Brand On Demand?

Benzing Web Design Marketing

When it comes down to it marketing yourself is a necessity. These days it’s an overstatement to keep yourself a float. But what methods work best for your company? Is internet marketing just as valuable as paper? I spent a little time investigating these questions and I found some interesting results. Online marketing sales are rising higher than print showing 92% over 88% print advertising. It definitely seems like the internet is a definable method of marketing. Check out the differences from our previous post “Online Advertising Tops The Charts“.

I recently succeeded in a facebook advertising campaign for our company and I must say it was a pleasant experience but didn’t pull the results I was looking for. Nor did a similar MySpace campaign. I have no doubt marketing takes time, as so many have said to me. Yet, there is probably nothing more critical for you to consider in this year than your organization’s branding.

What is the better, marketing online or print?

“The Web has become more of a prospecting tool, and print is what you send to those candidates who have leapt through the first qualification hoop.” says Anne Holland, with her article Print vs Online — Should Your Marketing Have the Same Content Online and Off?. I agree to what she says, The web has certainly opened many peoples eyes to explore information at an accelerated pace. Print advertising still has value in the physical aspect. There is no doubt I read my mail from my mailbox and my e-mails every thirty seconds. Which is where I see the value in online advertising compared to print.

Dennis Malaspina of Return Path says “Some say opposites attract, but email and postal are a match made in heaven. Both are direct media and both want to elicit a response from the intended audience.” he also agrees that the main difference is in the delivery. So why not use them together to bring a harmony of physical and virtual marketing. The objective would be to deliver your brand to the different types of people, some reading only paper and others eyes glued to the monitor. Today I see no difference in elders or youngsters who are involved in the technology outbreak. It’s here and only moving forward.

So to answer my question, should I market online or print? I choose both. The double whammy to my clients and potential clients. The real understanding of this post is in the effort you put towards it matters. Having a solid marketing plan and business plan will be the successful element in your company’s success. Being able to place a hat for passion and perseverance.

Benzing Web Design Marketing

by Patrick Lynch

User interface experts are often suspicious of the role of visual aesthetics in user interfaces—and of designers who insist that graphic emotive impact and careful attention to a site’s visual framework really contribute to measurable success. Underneath the arguments, I see a fundamental culture clash. In academia, text (and lots of it) is the only way serious people make serious arguments, and very polished presentations are often seen as prima facie evidence that the presenter may be hiding a weak argument with graphic frou-frou.

Many eyetracking studies conclude that large graphics and graphic elements attract few “gaze fixations,” but can we really conclude that large, aesthetic, tone-setting graphics have no lasting effect on the user’s attitudes toward a site? To put it bluntly, are designers who create visually compelling sites simply wasting time and treasure on graphic indulgences that obstruct efficient e-commerce and communication?

Perhaps not. Another body of web user experience research shows that website users are powerfully influenced by aesthetics, and that positive perceptions of order, beauty, novelty, and creativity increase the user’s confidence in a site’s trustworthiness and usability. Recent design writing and interface research illustrate how visual design and user research can work together to create better user experiences on the web: experiences that balance the practicalities of navigation with aesthetic interfaces that delight the eye and brain. In short: there’s lots of evidence that beauty enhances usability. [1]

What can we learn from user experience analysis tools such as eyetracking? Eyetracking is great for analyzing and understanding how users see, interpret, and use information. However, I disagree with usability researcher Jakob Nielsen, who asserts that, since his research subjects (apparently) pay little attention to large graphics on web pages, we can infer that those graphics have little influence on users — and that “useless” or “superfluous” images form “obstacle courses” for users. Nielsen isn’t talking about catalog images or other images closely related to merchandize or tasks, but about the images and other graphic content that designers use to create a site’s aesthetic ambiance. [2, 3]

I have no doubt that Nielsen and other researchers accurately report what their eyetracking study participants do in response to task-centric research on websites. Context is important here: In such studies, participants have a set of specific tasks to accomplish, and thus their gaze tends to focus on navigation links, titles, labels, and interface controls such as buttons and form fields. Expressive or visual tone-setting graphics are rarely useful in such tasks, and it’s not surprising that users performing these tasks (apparently) ignore most page graphics, as indicated by the infrequent gazes directed at large images.

To reconcile the differing views of the proper role of visual aesthetics, we need to understand how the brain processes images and responds to what we see.

It happens in an instant

Thanks to the work of the early 20th Century Gestalt psychologists—and to many studies since—we know that the brain’s response to images is extremely complex, and in many cases nearly instantaneous. The process seems semi-magical and therefore untrustworthy. How could something so complex happen so fast? How can we trust the results of a process we don’t thoroughly understand? Research confirms that users make aesthetic decisions about the overall visual impression of web pages in as little as 50 milliseconds (1/20th of a second). [4, 5] These instant visceral reactions to web pages happen in virtually all users, are consistent over visit length, and strongly influence the user’s sense of trust in the information. In short, users have made fundamental, consistent, and lasting aesthetic decisions about the credibility and authority of sites before major eyetracking events begin.

In intensely visual fields such as art history and diagnostic radiology, this kind of sophisticated, complex, near-instant Gestalt visual judgment is well-known and respected, although the exact neural mechanisms at work are not well understood. In Blink Malcolm Gladwell tells the story of the Getty Museum’s famous kouros, a nominally ancient Greek statue now widely regarded as a modern forgery. Although the provenance and mineralogy tests seemed to provide definitive proof of the statue’s age, independent art history experts were almost universally negative in their first visceral reactions to the statue. Thomas Hoving’s immediate reaction to the statue’s unveiling was “fresh,” hardly the right word for a sculpture that had supposedly been buried for two thousand years. At first, the experts had only their gut visual reactions as proof, but their skepticism caused the Getty to reconsider, and the evidence supporting the statue’s age and provenance fell apart on closer inspection. [6]

Although Jakob Nielsen has been one of the most vocal skeptics of highly graphical sites, his business partner, Donald Norman, has best articulated the ways in which sophisticated visual design not only influences users, but also contributes to better usability.

Why attractive things work better

In psychology, emotional reactions to stimuli are called affective responses. Affective responses happen very fast, and are governed in an automatic, unconscious way by the lower centers of the brain that also govern basic instincts (food, fear, sex, breathing, blinking, etc.). Think of affective responses as the brain’s bottom-up reaction to what you see and feel. Cognitive responses are your brain’s slower, top-down, more considered responses. They’re governed by your personal cultural views, learning, experiences, and personal preferences that you are aware of and can easily articulate. Affective reactions assign value to your experiences; cognitive reactions assign meaning to what you see and use.

Affective and cognitive responses to visual stimuli are governed by a three-stage process in the brain, at visceral, behavioral, and reflective processing levels:

The visceral (“gut”) processing level reacts quickly to appearances. It’s the visceral reaction to web pages that researchers measure when they detect reaction times as fast as 50 milliseconds. It’s crucial to understand that these instant good/bad visceral-level affective responses are largely unconscious: it can take seconds or minutes to become consciously aware of your first, visceral reaction to a stimulus—particularly a stimulus as complex as a web page.

Behavioral-level processing involves the more familiar aspects of usability: it responds to the feel of using the site, the functionality, the understandability of the structure and navigation, and the overall physical performance of the site. At this level, users are consciously aware of their attitudes toward the behavior of the system, and their reactions (pleasure, for example, or frustration) play out over seconds and minutes as users interact with a site. It’s at this behavioral level that techniques such as eyetracking are most powerful and trustworthy, because they offer

detailed moment-by-moment evidence of what users consciously decided to look at and do to fulfill a given task.

Reflective processing of reactions is the most complex level, and typically involves a user’s personal sense of a site’s beauty, meaning, cultural context, and immediate usefulness. Reflective processing often triggers memories and encourages pragmatic judgments about the overall

aesthetic worth and value of what a user sees. Eyetracking and traffic logs are irrelevant at this level, but user interviews can give you insight into your user’s reflective judgments.

Visceral (affective) reactions can take a relatively long time to bubble up through layers of processing to enter conscious awareness at the behavioral or reflective levels, but that doesn’t mean that affective reactions don’t immediately influence thought. In fact, it’s the instant,

pre-conscious pleasure of seeing a well designed page that makes you predisposed to find a beautiful design easy to use—an effect that lingers long after the slower, conscious behavioral and reflective levels of processing kick in and make you aware of how you feel about what you see.

Classical and expressive aesthetics in web design

To explore viewer reactions to site design, user experience researchers need basic aesthetic models that simplify a complex subject, but nonetheless do offer some guidance to designers.

These models are often divided into “classical aesthetics” versus “expressive aesthetics.” [7] Users bring context, expectations, and intentions with them, and the extent to which a site’s visual design matches those expectations will strongly influence perceptions of the quality and reliability of information or site interactions.

Classical aesthetics

Classical aesthetics stress orderliness and clarity in design, and use familiar web and print conventions. Research shows that classical aesthetics strongly correlate with perceived usability. This model is most successful when users expect an e-commerce or content site to provide large amounts of information in a well-organized way, with a clear visual hierarchy and conventional headers, subheads, captions, and navigation—think newspapers, sophisticated magazines or e-commerce sites, or reference sites such as Wikipedia. The pleasure and trust that classical aesthetics generate seems to be centered in the higher and slower reflective level of processing. However, classically beautiful sites also generate instant positive visceral reactions as well, and this creates a lasting sense that a site is easy to use.

Expressive aesthetics

Expressive aesthetics emphasize the originality, creativity, and visual richness of the site design. Think about the kind of site that typically wins design awards from Print or Communication Arts. Successful expressive designs generate immediate, positive visceral reactions in most users. It is less clear that this immediate expressive response influences longer-term positive judgments as strongly as successful classical designs, particularly in perceived ease of use. Understanding your audience is particularly crucial in expressive designs: a “successful” design approach for foreign policy wonks may be less successful with fans of the Jonas Brothers.

Expressive and classical aesthetics seem to correlate equally with the general positive or negative attractiveness of a site, but user expectations and context influence longer-term responses. Users expect the aesthetic model to complement the purposes of the site, for example, and thus text-rich content sites seem to benefit more from the classical aesthetic approach. Carefully built designs contribute strongly to the sense that a site is trustworthy and credible, no matter which aesthetic model they use.

Using data in the context of design (and not vice versa)

The visual aesthetics that frame and define content are much more than simply a “skin” that we can apply or discard without consequence. Users react in fast, profound, and lasting ways to the aesthetics of what they see and use, and research shows that the sophisticated visual content presentation influences user perceptions of usability, trust, and confidence in the web content they view. [8] Those user judgments begin within 50 milliseconds of seeing the first page of your site.

Smart graphic design is always some balance of current expressive trends, information architecture, classical layout aesthetics, and detailed research on user preferences and motivations. You should never ignore solid user experience data, but mountains of data won’t auto-magically build you a successful site. Design is a synthetic activity. It can be informed by the results of analysis, but the tools of analysis don’t create beautiful designs. Douglas Bowman’s recent experience as a graphic designer among Google’s engineers who want “data” behind every aesthetic decision is instructive: data and user feedback are always important components of good design, but they are never its sole ingredients.

References

[1] Norman, Donald. Emotional Design. New York: Basic Books, 2004.

[2] Nielsen, Jakob. Eyetracking Web Usability. Fremont, CA: Nielsen Norman Group, 2006.

[3] Nielsen, Jakob. Eyetracking study of web readers. Alertbox, 2000.

[4] Lindgaard, G., G. Fernandes, and C. Dudek. “Attention web designers: You have 50 milliseconds to make a good first impression.” Behavior & Information Technology, 25:2 (2006): 115-126.

[5] Tractinsky, N., A. Cokhavi, M. Kirschenbaum, and T. Sharfi. “Evaluating the consistency of immediate aesthetic perceptions of web pages.” International Journal of Human-Computer Studies. 64:11 (2006): 1071-1083.

[6] Gladwell, Malcolm. Blink: The Power of Thinking Without Thinking. New York: Little Brown, 2005.

[7] Schaik, P., and J. Ling. “The role of context in perceptions of web pages over time.” International Journal of Human-Computer Studies. 67 (2008): 79-89.

[8] Stanford Persuasive Technology Lab. “Stanford Guidelines for Web Credibility.” 2004.

Article Source: A List Apart – http://www.alistapart.com/articles/visual-decision-making/

Benzing Web Design Marketing