09. February 2016 · Comments Off on Pony Party Place has a New Web Site Design · Categories: Web Site Examples · Tags: , , , ,

cartoon ponyThis was a fun project.  At the beginning of every design or redesign project I ask what’s the audience for this web site.  For Pony Party Place the audience is families with young children.  Research showed unanimously that children respond best to cartoon web sites.  This is my first cartoon-style web site and I had a blast with it.  I purchased a stock cartoon pony, but the rest of the cartoon images I either created in Photoshop or got from free clip-art sites.  I also did an on-site photo shoot at one of the parties, which, by the way, looked like one of the best kid birthday parties ever.

Pony Party Place

On March 15, 2012 I attended the Web Site Demolition Derby panel at the South by Southwest Music Festival. On the panel were:

The purpose of the panel was to critique musicians’ web sites.  Following  are my notes.

Biggest Mistakes

  • Text is too small
  • Auto playing music or other sounds
  • Built in Flash animations – Flash never looks as good as the first time you see it, the novelty wears off, and it doesn’t work on mobile devices (you’d know this already if you read my blog!)
  • Your name or what you do is not immediately clear
  • Audio or video players don’t work
  • People hate you for putting them through extra clicks

Best Advice

  • Keep it simple
  • Build your web site to change frequently – treat your web site as living and breathing
  • Implement a 30 day, or less, news cycle
  • Make it unique – branding and identity are important
  • Reflect who you are
  • If you’re a performer, always provide a date your fans can look forward to
  • Immediately give your visitors something to play or watch
  • Text is just as important as photos

More »

02. February 2010 · Comments Off on The Persuasive Power of Repetition, Clarity, & Simplicity · Categories: Design Tips · Tags: , , , , , , , , , ,

easyAnother argument emerges for simple web design (see my previous post  Creating Your Web-Scape)  in Drake Bennett’s article on cognitive fluency, Easy=True. Cognitive fluency is  the psychological precept that “people prefer things that are easy to think about to those that are hard…In any situation where we weigh information, fluency is implicated in our decisions about everything.”

In a nutshell, when information is easier to mentally process, people feel attraction and belief.  The opposite,  disfluency – making things difficult to grasp,  creates a cognitive roadblock that makes people wary and uncomfortable.

While this might seem intuitively obvious, evidence abounds that plenty of businesses (and web designers) don’t get it.

Bennett’s article is a terrific resource for more information on fluency and disfluency and the supporting research.

For the purpose of this blog let’s take a look at the practical implications of fluency and  disfluency in terms of web design.  Keep in mind this is all based on research, not my own preferences.

Disfluency:the art of making things difficult –

Web Design that Loses Business

Here are some characteristics of a disfluent web site that will leave web site visitors with a negative impression.

Inaccessibility

  • Unfamiliar words (for example, technical jargon and acronyms)
  • Names and words that are difficult to pronounce
  • Complex syntax
  • Illegible text (see my previous post The Dog and the Lotus)
  • Missing information or convoluted instructions
  • Functions that don’t quite work

Sensory Overload

  • Overcrowding the page
  • Visual distractions
  • Multiple columns of disparate text
  • Little or no white space
  • Flickering animation

Inconsistency

  • Confusing navigation
  • Poor organization

Fluency:the art of making things easy to understand –
Web Design that Encourages Business

Here are some characteristics of a fluent web site that subliminally suggest to visitors that your business is reputable and trustworthy.

Repetition

  • Consistent navigation and page layout across the web site
  • Artful repetition of key ideas(note: repetition is good, redundancy is bad – know the difference)

Clarity

  • Legible fonts and color coordination
  • Plenty of white space
  • Language and syntax that everyone can understand

Simplicity

  • Message boiled down to its essence
  • Graphic design and content that are easy to assimilate (accessible) both visually and conceptually

Web Site Analysis: The Glass House

glass house web siteLet’s take a look at the web site for The Glass House and see how well it does fluency wise.

Repetition: The grey box is repeated throughout as the background to the title (I like the opacity that reminds us of the see through quality of glass), the background in the drop down menus, and the background for other important pieces of information.

Clarity: The site contains a lot of information,  notice how it’s been logically organized and categorized.

Simplicity: One column layout, plenty of white space.

Verdict: Fluency.  I’m convinced this is a reputable organization dedicated to professionalism on all levels.

Analysis by Smart Alice Web Design & Photography, smart web design for businesses who want a unique and effective presence on the internet.

Two web sites caught my eye recently.

Blue Box Layout

The Guthrie Theater web site has a great layout. Blue boxes in all different sizes contain information, photos,  and a slide show.  The image below was captured in 2009.  Click on it to see how it has evolved today.

Home Page, Guthrie Theater

Innovative Navigation

The web site for artists Louviere + Vanessa: New Orleans is definitely outside the box. I love their images. To navigate the site you use your mouse to draw an arrow in the direction you want to go. You’ve got to try it and see what you think of it. It’s really strange, but I love the user interaction. If I were truly trying to find information, this might be a frustrating experience. But the site is an art gallery and it’s so much fun to wander through the gallery with this unusual navigation gizmo. Gotta find out how they do it!!

Louviere + Vanessa, web site

Analysis by Smart Alice Web Design & Photography, smart web design for businesses who want a unique and effective presence on the internet.

Copyright 2009, Alice Gebura, All Rights Reserved.

One of my favorite photographers Bruce Percy says the following about creating a landscape photograph:

“The strength of an image lies many times in what we exclude from it.  Putting more things into a scene can often dilute the strength of the message. Keeping it simple is key.”

Web designers would do well to follow this advice.  Similar to creating a landscape, creating a web site should isolate and focus on what’s important by carefully selecting and streamlining graphic components.  We create something ugly and unfriendly when we clutter a page with multiple ideas, extraneous information, or unnecessary functionality.  Choose one idea and execute it well.  Don’t add stuff just because you can.

Redundant menus

Redundancy

For an example of what I’m talking about, let’s visit the Harvard Parks & Recreation web site.  The left column provides links to the rest of the site.  When I mouse over the Main Page tab, the same content links appear (see screen shot on the left).  Why do I need to see the same links twice?

Ugly Graphics – and lots of them

There are three different graphics on the home page.

Landscape photo – used as background for title. Note the gray, out of focus, pixelated photo.  If you can’t find a great photo locally (hard to believe), why not spend $3 for a decent image from iStockPhoto?  The landscape theme is relevant, though.  The message it conveys is “lake/recreation/swimming/boating/fishing.”

lake

Tree logo in the left corner. Suggests a conservation theme.  Relevant?  Not really.

tree

Lawn – close up photo used as background. Suggests lawn care.     Note the text next to the check box is barely legible.  Text that is too tiny to read drives people crazy.  Do we care about the number of visitors? Just because it’s easy to count and display visitor numbers, doesn’t mean it should be included.

grass

Three different graphics with three different meanings create visual and mental confusion.  Extraneous functions and poor design contribute to usability issues.

A Simple But Effective Layout

An example of a simple yet effective web site is that of screenwriter Zen Freese.  The coffee stain graphic, the horizontal lines, and the tape are things that remind us of the writing process. We write at our desk, cup of coffee on top of the last draft, taping the latest revision to a page in progress.  Our tools, represented by the two fonts, are a typewriter and a pen.  The message is clear.  Nothing extraneous distracts us from the message. Unfortunately this well designed site no longer exists.

zenfree

Web design is about common sense way before it is about how much functionality or other junk you can stuff onto a page.  Keeping it simple for both impact and usability is key.

Analysis by Smart Alice Web Design & Photography, smart web design for people who want a unique and effective presence on the internet.
Copyright 2009, Alice Gebura, All Rights Reserved.

choclateOne of my all time favorite web sites is David Lebovitz, Living the Sweet Life in Paris. Lebovitz is an all star pastry chef. His web site/blog has fabulous food photos (I’ve included an example here). The images are superb – beautiful, professional photographs that instantly tell you this guy is serious about food and food quality. He uses those gorgeous photos to illustrate his various culinary adventures with ingredients and funky kitchen gadgets.
More »

22. January 2009 · Comments Off on Confuse-a-User · Categories: Usability · Tags:

Biowisdom Web Site

Let’s test the idea that the more you duplicate links, the easier it is for users
to find stuff on your site. We’ll use the old Biowisdom web site as a test case. Each page provides five ways to navigate, as indicated above.
More »