Fun Bits: Web Design Findings

A new web font service launched today called Typekit.com. They claim they can deliver an extensive library of high-quality fonts that can be incorporated into a site via a CSS line of code (@font-face). The idea of breaking out of the browser safe mac/pc fonts is liberating. But it just seems too good to be true.

This sounds very similar to the dynamic fonts functionality that was HOT a few years ago, but never caught on. Being the bleeding-edge designer that i am, we tried to use dynamic fonts on a site. But it only seemed to work sporadically. And the initial font download was bigger than we had expected. Ultimately, we could never be sure that the end user was seeing the same thing that we were. Just plain frustrating. So we never used it again.

The set of browsers that don't use the @font-face tags are browsers older than Firefox 3.5, Safari 3.4, and IE 5. So if you think of it, that's a pretty sad group of legacy browsers. Looking at the general browser averages, that's less than 20%.

Well, let's all go download the free version of Typekit and start testing this stuff out. If this technology is stable, elegant, and delivers what is says it will, it could potentially change everything for us designers.

I must confess I love watching usability testing. When there are a few hours of usability video sessions available for me to watch, I go get some popcorn and watch 'em all.

The real value of these videos is actually watching the users interact with pages that we've designed. The things we see and the things we hear are so incredibly insightful, illuminating, and unpredictable. So empowering.

Luckily we have a company that facilitates the "interview" process. Not sure i'd be so quick on my feet with those questions -- definitely a learned skill. But i certainly LOVE being on the other end and able to watch and see what engages the users and why.

Most users are incredibly forthcoming with WHY they like or don't like a web page. And, sometimes they offer-up insightful suggestions. One user dropped this perl of wisdom, "We don't click on things we're not looking for." Ha! Brilliant.

Jakob Niesen says "It only takes five users to uncover 80% of high-level usability problems". He's right. It's that simple.

So go and watch your next batch of user testing videos and learn. It's the best way to get a finger on the pulse of your users without any analysis or distortion. The findings are a great way to identify problems and help informed decisions.

I'm not big on passing on fake videos, but this one made me laugh. It truly captures how the iPhone has an incredible mind-share on taking care of our personal needs.

There really is an app for almost anything.  Even when there shouldn’t be.

Yes, i love my iphone lots.

Here are some fantastic statistics about Social Media in this video: 

Some of the juicy tidbits from the video:

• By 2010 Gen Y will outnumber Baby Boomers
• 96% of them have joined a social network
• 1 out of 8 couples married in the US last year have met via social media
• Facebook added 100 million users in 9 months
• If Facebook would be a country, it would be the world’s 4th largest
• 80% of companies are using LinkedIn as their primary tool to find employees
• 80% of Twitter usage is on mobile devices. People update anywhere, anytime. Imagine what that means for bad customer experiences?
• In 2009 Boston College stopped distributing e-mail addresses to incoming freshmen
• YouTube is the 2nd largest search engine in the world
• There are over 200.000.000 Blogs. 54% of bloggers post content or tweet daily

But this makes me wonder if social media is more of an evolution... rather than a revolution. Email used to be the killer app. Now these new social tools are allowing us to connect and communicate with each other in other evolutionary ways.

> Complete List of All Sources Used in the video (Socialnomics.net) 

The Sun Student OSUM community today launched a contest that allows users to VOTE and pick the new design for the social Ning platform. It's an interesting concept: by letting the community vote and choose, will the wisdom of the crowds ring though?

> UPDATE: Design Poll Completed (Green Won!)

This is the first time that I've personally been involved in a design project were the users get to pick the final design. Typically, we define the overall goals, create the different design options, and then let the "executive" in charge pick the final design. But here, the users ARE the the final say.

 So the question is: does the wisdom of the crowds theory really work in this instance? Will the best design get picked by the community? Does the theory show that people are smart in groups? Anyone who's seen an angry mob will dispel that theory.

The truth is is that crowds, presented with the right challenge, in the right context, can be wise. When it works, the crowd is wiser, in fact, than any single participant.

And, hopefully, i'll be a little bit wiser and informed about social community platform designs.

As every good executive needs to be in the know, here are some great new words from the "Slang Dictionary":

1. Funemployed (v) = Not having a job, yet having lots of time to enjoy fun activities during otherwise normal working hours.
2. Carborexic (n) = a person who is obsessed with minimizing his or her use of carbon
3. Precycling (v) = purchasing products based on how recyclable they are.
4. Disemvowel (v) = To remove the vowels from a piece of text as a form of editing down on space
5. Micro-boredom (n) = What used to be called downtime, but is now filled with checking our phone/chat/sms/email.
6. Pinkwashers (n) = Certain companies that specifically use support for breast cancer research to promote products or services.
7.  gr7 = pretty good, but not gr8.
8. Geo-fencing (v) = Setting a physical boundary, via a GPS system to where someone can roam.
9. Caribou Barbie (n) = A nickname for a former vice presidential candidate, Gov. Sarah Palin of Alaska.

Please let me know any other good ones you know! We'll add them to the list.

There is a belief that interfaces are made enjoyable just because they are easy to use.

My question is how important does the aesthetics play in shaping how we come to know, feel, and respond to interface elements?

On a daily basis, I have to consider how far to push design elements down to a pixel variation. Would the addition of a very subtle drop shadow, gradient, or highlight help the users find what they are looking for? Do these small moves make a difference? Or are they just "eye candy" and of no nutritional value?

My firm stance is Less is More. But that said, i've also instinctual applied a level of details to all interface work that not everyone is attuned to with the main goal of a "pretty design".

Ask yourself which button below do you prefer?Which would you be more inclined to touch/click?

Can small design moves make items more approachable and interactable (is that a word?).

My instincts say hole-heartedly "hell yes". So I'll keep going with that assumption.

Who would have thought that I could potentially be an anomaly? And that Sun, in general, is very supportive to minorities? Well...

According to over 30,000 readers who took part in the 2008 A List Apart Web Design Survey "The Survey for People Who Make Websites", women make-up ONLY 16.2% of website development teams.

It's been fairly obvious that Sun is supportive of women because of the large number of female executives in play. And, it's quite true that many meetings that I've attended have lots of knowledgeable, technical women are core on the team. And, come to think of it, more than half of the  core web publishing team are women.

I just didn't realize that this is not industry standard.

Well, kudos to Sun then!

>>See Complete Survey

Searchme.com lets you see what you're searching with a quick visual preview of the website. It not only displays the actual website as a visual stack that can be flipped through, but also the category which it's within.

>> See it in Action

This technology seems similar to ThinkMap, but a more visual and linear presentation. I'm going to go download their nifty iPhone app right now!

Here's a great list of usability problems that websites commonly face.

1. Tiny Clickable Areas — basic common sense can help eliminate this
   
2. Pagination used for the Wrong Purpose  — too many items on a page
3. Duplicating Page Titles — make them unique for optimization
4. Content that is Difficult to Scan — good content and hierarchy of importance is a must
5. No Way to Get In Touch — people DO want to talk
   
6. No Way to Search — people DO search
7. Too Much Functionality that Requires Registration — (ut oh... we may be in jeopardy of implementing this one)
8. Old Permalinks Pointing Nowhere
9. Long Registration Forms — kill all the extra questions and fields you really don't need

View Examples

Our new president has embraced a contemporary and rich media form of communication — a weekly video address broadcast on the whitehouse.gov site.

The website has been completely overhauled with a lovely redesign to support this goal. Nice visual design, typography, color pallet, and overall architecture. A featured home page rotating carousel leads with rich visuals and supporting CTA from either the new video address or highlights from the Blog. The weekly video address is accompanied by a text transcript. So even the users who can't watch the video can read the message as well.

Only time will tell if this medium will support the message. But this re-branding exercise definately conveys a new direction: new design, new content, and new technology.

We come out of art school with the notion that we'll be spending about 80% of our focus and time on designing fabulous widgets and eccentric interfaces. But the truth of the matter is, in the real world with real people, we end spending about:

• 1/3 on Politics — scoping goals and overall agendas
  
• 1/3 on Design — actual hands-on photoshop thinking in right brain
  
• 1/3 on Production — assets, content input, & technical development 'n integration

This makes perfect sense when taking a closer look at the definition of Politics:

"Politics is the process and conduct of decision-making for groups. Although it is usually applied to governments, political behavior is also observed in corporate, academic, religious, and other institutions"

It is possible to make politics more of an art form by applying some good old design thinking:

1. The politics of questions: How will the questions we ask at the beginning of a process shape the decisions we make and the product that eventually results?
2. The politics of change: How can we change the mind-set about design? Can we change the typical processes, which are technology or feature-and-function driven, to be user-focused? Can the designer become the interpreter of the requirements with a well-developed sense of user empathy?
   
3. The politics of convergence: Where are the gaps and strengths of the team? How can we successfully marry the agendas of both the business and the user?
   
4. The politics of corporate survival: What creates barriers or opportunities for good design decisions?
5. The politics of language: How can a clear content strategy affect the politics of design?
6. The politics of politics: Good intentions are not enough. Work within the system, or fight from the outside. Celebrate unexpected success.
   

Take chances.

Be willing.

Be brave enough to fail.

That's the message behind Honda's new Dream the Impossible documentary short film series. Here's a fabulous new short film called "Failure: the Secret to Success"

>WATCH VIDEO (8:19)

Failure. The mere thought can paralyze even the most heroic thinkers and keep great ideas off the drawing board. But is failing really that bad? Get an inside look at the mishaps of Honda racers, designers and engineers to learn how they draw upon failure to motivate them to succeed. From poor color choices to blown race engines, these risk-taking individuals provide an honest look at what most people fear most. Watch the film and discover the upside of failure.

In the spirit of the Martin Luther King Holiday... here is an inspiring design story.

In 1966 Charles Harrison solved an everyday nusance—the early-morning clanging of metal garbage cans—by designing the first-ever plastic garbage bin for Sears. "When that can hit the market, it did so with the biggest bang you never heard," wrote Harrison in his 2005 book, A Life's Design. "Everyone was using it, but few people paid close attention to it."

BACKGROUND

Harrison came from a home where money was tight and became skilled in solving problems. "That set the stage for the rest of my life." Harrison said. He also struggled with dyslexia. But found his strength in art. In 1956, Sears refused to hire him because of an unwritten policy against hiring black people. To get around it, they hired him on a freelance basis through a vendor/contractor. In 1961 when they finally hired him, Harrison rose to become the first black executive and overseeing 22 designers. He worked at Sears for 33 years until the department was shut down in 1993 and was the last employee to leave.  Harrison currently teaches at Chicago's Columbia College. Read More

PRACTICAL INSIGHT

• Design should be uncluttered, straight forward and honest.
• A lack of job security may cause you to find security deep within yourself
• The afternoon sun may litterally shed light on a problem in a way that you may not have seen at daybreak.
• Being the odd man out may give you the right perspective.

PHILOSOPHY

1. Family - pull from your family background
2. Skill - always push your skill with continuous learning
3. Experience - touch the world and different cultures. really learn about the people you're designing for.
   
4. See a Wider Scope - realize you're doing this for someone else. Not yourself.
   
5. Keep pushing - keep your focus. have a passion. stay with it and you'll most likely make it.
   

Here's a great list of 10 useful interface design techniques and best practices used in many successful web-applications. This list can vastly improve the user experience in web designs as well.

1. Interface elements on demand  (Simplicity achieved through reduction. But deciding what to show and what to keep is key)

2. Specialized controls
   

3. Disable pressed buttons

4. Shadows around modal windows

5. Empty states that tell you what to do

6. Pressed button states

7. Link to the sign-up page from the log-in page

8. Context-sensitive navigation

9. More emphasis on key functions

10. Embedded video
    

> View Examples

My interface design sketches on paper tend to look similar to what my 7-year-old daughter kicks out. But with this handy sketchpad, complete with browser window, and grid, and this awesome website interface stencils, i'm confident my sketches could improve. 

Inspired by the NYTimes buzzwords of 2008 article, here are my list of the top 10 buzzwords:

1. Crowdsourcing - managing a project by passing the ball around
   
2. SWAT Team - special working agile tag team
   
3. Gap Analysis - investigate project scope
   
4. Rules of Engagement - department to department
   
5. Due Diligence - investigate project goals
   
6. Solutions - grouping of solution-based technologies
   
7. Organizing Principles - a content strategy motivator
   
8. Drive Forwards - moving a project forward without the goals clearly defined
   
9. Junior Moment - a sudden lapse into immaturity
   
10. IM Tweet - using IM status to twitter
    

While watching many hours of user testing screen casts, a few choice bits of crowd wisdom came screaming though:

1. "People don't click on things they aren't looking for."
2. "Marketing stuff makes it so, um, bland."
3. "Am i too old? Video is just not fast enough for me. I want to get to the details faster."
4. "Whenever they are talking about how great a product is, that's marketing"
5. "I can't print out (information learned in) videos. Wish there was a video highlights, notes, or transcript i could download and print out."
   

I have a confession. I'm ready to stop pretending content is somebody else’s problem. Let's jump on the content strategy bandwagon—it’s time to make content matter.

Defining an organizing principle that will guide why we need to say it and how it could be said is key. Then figuring out which content could go where and in the best layout/format possible will be clear.

As content strategist Kristina Halvorson of Brain Traffic says:

"Until we commit to treating content as a critical asset worthy of strategic planning and meaningful investment, we’ll continue to churn out worthless content in reaction to unmeasured requests.

We’ll keep trying to fit words, audio, graphics, and video into page templates that weren’t truly designed with our business’s real-world content requirements in mind. Our customers still won’t find what they’re looking for. And we’ll keep failing to publish useful, usable content that people actually care about."

>Read the Full Article

Amen. Have a great New Year!

As we move into the new year, we're all faced with the challenge of how to design customer web experiences that sucessfully integrate the best that social networking Web 2.0 tools has to offer. 

The opportunities to engage consumers are vast. But solving the front-end design and customer experience is not as simple as it seems.

Principles to consider:

1. Don't just talk at consumers -- work with them throughout the marketing process.
2. Give consumers a reason to participate.
3. Listen to -- and join -- the conversation outside your site.
4. Resist the temptation to sell, sell, sell.
5. Don't control, let it go.
6. Find a 'marketing technopologist.'
7. Embrace experimentation.

>Read Full Article at WSJ

Watch the Related Video "Recovering from Negative Reviews" Discusses Dell's recent forey into it's customer communications. "A Web site can be a marketer's lifeline with its customers, but what happens when it's marred with negative reviews and comments?

Xhilarate is a website that displays bookmarks in an unique visual presentation -- called supercharged creative bookmarks. Originally started off as a simple idea of sharing a personal bookmark collection and then launched as a open resource.

Wish this functionality would be offered up as a Firefox plug-in. I might be able to consume my bookmarks a bit better this way.

 > Visit Xhiliarate

Ok. Not to start sounding elitist... but here is a list of 10 useful techniques to improve user interface designs. 

1. Padded Block Links
2. Typesetting Buttons (this is a stickler for me!)
   
3. Using contrast to manage focus
4. Using color to manage attention
   
5. White space showing relationships (ah, yeah!)
6. Letter spacing
   
7. Auto-focus on input
8. Custom input focus
9. Hover controls
10. Verbs in labels (so important could be moved to #1!)

>View Examples

Stamen Web Design firm creates wonderful, rich, interactive illustrations.

> Visit Stamen Design

A few personal favs:

1. digg swarm
2. hurricane maps for MSNBC
3. interactive map of housing prices in London
   

The MoMB is a site dedicated to listing webbased applications on a beta trip.

> VISIT MoMB

 Pretty funny that a beta site could become a sub-category mover.

 With headers of "Hot 100"

or

"The hottest betas in the webosphere, as measured by the number of bookmarks at del.icio.us"

In early November, my local paper, the LA Times, was delivered with a shiny new look -- from overall layout, colors, callouts, large graphic focus, to completely new type faces. The subscriber note in the paper read:

"Now our home gets a makeover. Today's world is complex. But with the better, bolder, brighter LA Times, navigating your world is simple. We've rethought how we deliver the news right down to our typefaces. We sweated the details, because great journalism is about getting every detail right."

This was a bold move for a long-standing historic paper. I was impressed and inspired. Even the LA Times was simplifying and re-architecting. They even went so far as to declare usability as the main goal with  "making it easier to get what you need".

And we know that sweat.

Coming from the digital design world where just a small CSS edit can effect a major design change, and/or the seemingly unwritten rule mandating online brands to change up their look or risk looking outdated, means that I've lived that redesign sweat many times over. But more importantly, the need to change design in order to accomplish better usability is truly the best goal. So for our mainstay print newspaper to take the leap is honorable and inspiring.

More Information:

VIDEO:

> Watch the back story on the specific redesign goals and details

DOWNLOAD PDF:

> The editor, Russ Stanton, asked the readers for their feedback

BLOG:

> Initial Subscribers' feedback