Design that lets you know yourself better

I remember reading about the importance of colours in design. Each one of them conveys a feeling, an emotion or a state of mind. But what about fonts? I found this website that connects your personality with a specific font. It's interesting because it may also be useful for reinforcing the other elements of design like colour, graphics, photos, sound, and writing style.

There are two aspects of this website that set it apart from others on the Internet. The fist one is the content and the second one is the way the content is delivered.

Let's start with content. It presents some interesting (and debatable) points in terms of matching fonts with personalities. The right type of writing for you will depend on deferent combinations of four categories: emotional or rational, understated or assertive, traditional or progressive and relaxed or disciplined. So, there you have, 48 different types of personalities to match with different fonts. It's good inspiration if you feel, one day, that you are stuck trying to find a specific font that will appeal to a certain audience.

About the second point: The way the message is conveyed. The website does a great job at immersing the visitor in a fun, relaxed and interesting environment. This is possible because of:

An interesting introduction, short, to the point and explains the site's purpose.

The colours: The deep black adds credibility and creates a perfect contrast with the video which, makes you feel that you are at an expert's office (at the same time you can tell it's a joke).

The music: It's perfect, adds a humorous note while keeping a sense of formality.

The video: It's one of the best parts. The actor's face is never shown. The voice has an accent, stereotypical of scientist and eccentrics. 

The test and the feedback after each answer create the feeling of a dialogue. It doesn't create the awkward feeling of talking to a machine.

And, of course: The font. It's just perfect: clear, clean and book-like. 

This website is a complete design success.   

Design creates transparency

This website is fascinating. It's a story about a seemingly insurmountable task and an ingenious solution that involved fine design.

If you visit the website: http://sarahsinbox.com/ you'll find all of Sarah Palin's emails from when she was governor of Alaska. Doesn't seem too exciting so far? Wait until you hear the story behind it.

The History:
A number of American newspapers were given access to Sarah Palin's email from her time as governor of Alaska through a Freedom of Information request. The journalists wanted to see if there was anything of interest to the public amongst her correspondence.

The Difficult Task:
The governor of Alaska's office provided the newspapers with the information that they required. But there was a catch: If they really wanted it, they would have to go to Alaska and collect 250 pounds of paper that the emails were printed on -- no digital option was given. And because the information was not in electronic format, searching for any information involved sifting through all of the emails by hand, without search tools, a long process.

The Solution:
While other organizations like the New York Times chose to crowd source the emails to help them in their hunt for interesting information and provide readers with access to a database of the scanned emails, an organization called Sunlight Foundation went one step further with a website that mimicked Gmail in its look and feel, and in its functionality. They did this by taking Palin's digitalized emails and loaded them into a website with a Gmail frame. The result is this amazing page where you can browse through Sarah Palin's inbox as if you were, well, Sarah herself. You can click on "sent" to see which emails she sent, you can use Gmail's label function to read the emails on topics of interest to you and you can star particularly important emails to go back to. It's crowd sourcing in a way that is very natural to the crowd because it's using a format they interact with everyday.

The Conclusion:
Good design ideas don't have to be complicated. They have to be functional, simple and easy to understand by the end user. In this case, by creating a website similar to Gmail, Sunlight solved a very difficult problem: How to get people to go through all this information (emails in this case) and make sense of it. And more importantly, how to get people engaged in a relevant way so, they can effectively become a relevant source (crowd source) for solving a problem that otherwise could take months to solve.

Bells and whistles!!! But no real design

I know one should focus on good design ideas and be inspired by them. I promise I will do that from now on (after this post, I mean). I just couldn't help it, I had to share the frustration and astonishment that this website made me feel: http://www.cockchester.com/ It's in a certain way like my last post about the world's worst website. It's just that, in this case, it's real, not a joke.

Unfortunately, the site is in Spanish so, you'll have to take my word for it in many aspects. On the other hand, the design sins showcased here are so rampant that language is definitely not a barrier  to understanding the atrocities committed.

The first thing I noticed when I opened the website was that it was impossible to know at first glance what the site was about or what the business was behind it. The menu at the bottom of the page is difficult to see.  It is not obvious at all that you are supposed to click on the plus sign at the centre top of the page to see the menu.

When you are eventually able to catch up with the eight hovering pluses and hold your mouse over one of them, a link to one of the sites' sections will appear on the screen. There is not apparent connection between these links and the plus that represents them. They are random titles that don't offer relevant information to the visitor (titles like: "expressive, our friends" or "creative, our work" which don't make sense in Spanish either). Once you click on any of the links it's difficult to click on any of the objects that appear in their place, as they to keep on moving. It feels like you are hunting them down on the screen. There is too much movement, the navigation becomes annoying and stressful.

This screenshot showcases a group of five moving circles you are expected to click on after the pluses -- good luck.

The back and forward buttons on the browser don't work on the website past the homepage. If you click on them on any of the child pages you'll immediately be kicked off the site and back to Google (or whatever page you were looking at before).

If you manage to not be ejected from the site, and look around for a while, you finally realize that the company is an advertising agency. It takes a long time and patience to figure that out.

As a side note, the whole page was designed in Flash, which makes it difficult to access from PDAs (specially iPhones) and tablets (specially iPads).

The Good


OK, I admit it. Not everything is bad. But the good has nothing to do with design. If you manage to have the patience and time to drill deep, deep down and happen to find the portfolio of services (radio and TV ads), they are good. Just don't ever hire Cockchester to design your website or communications strategy, that will be a huge mistake.

The Colours
I understand that black and red are Cockchester + Partner's corporate colors and because of this it makes sense to feature them on the website. The problem is when they overdo them and create a claustrophobic feeling. When looking at the colours, memories from childhood came to my mind, the ones where you got sick after eating too much candy. It's so intense and overwhelming, that you definitely want to leave the website in less than one minute.

Conclusion: 

The website was designed to show-off and completely forgot about the end user. It's not a effective tool for business or communication. It does show that they have good Flash programers. The most important lesson here is: Don't forget your customer. It's not about "preaching to him or her" about how great you are doing fancy things on the internet. It's about effectively impressing your customer by catering to his/her needs and establishing a relevant channel of communication between the parties.  

P.S. If you feel like providing some feedback, you can email: cock@cockchester.com (Yes, it's a real email, I'm not kidding!)

Something terribly bad can be extremely effective

Yes, I know, it sounds like a complete contradiction. But it's true in this case. An effective way to make sure someone learns a lesson is making that person go through the consequences of not using the knowledge that you are trying to convey.

I found the World's worst website and indeed I believe that its claim is true: It is are horrible!

The interesting point about this website is that it outlines everything that could go wrong in designing an Internet site by just... doing it! It's probably the best way to get your point across. It's also interesting to see the concise explanation of each common mistake and how to avoid it.

I particularly enjoyed the second, third and forth paragraphs about font colors and background. I laughed off laud while trying to read the almost unreadable text while trying to mute the annoying music.    

I like this site because it's a humorous and clear way of learning about Visual Design. It's funny to say it, but it's very well designed for the message and feeling it wants to create in the visitor. When you are surfing though it, you truly feel claustrophobic and becomes obvious that the design is completely wrong. However you want to keep on reading, because it's just amusing to think that there are people out there (some of them possibly your clients) who think that this design ideas are good.

The terribly bad, can be, under certain circumstances, good.

Juan

Smart cartoons: More than just fun

A bit less than a year ago someone sent me a YouTube video about ‘Changing Education Paradigms’. It’s a lecture by Sir Ken Robinson, a world expert in creativity and education. I was absolutely delighted with the speech. But what got me especially excited was the original format that the creators of the video used to deliver the message. 

Publish Post

This way of presenting information takes the concept of visual learning to an entirely new level. Listening to Sr. Ken Robinson’s speech while watching how the images are drawn makes your mind understand the presentation more easily. I realized that I was paying more attention than I did when listening to a traditional talk. I also was able to remember better the lecture’s content afterward.

After I discovered it, I became a real fan of RSA Animated on You Tube. I think I’ve watched all their videos so far.

This is a good example of how a simple idea can make an important improvement in the way we present information. Most of us have probably thought of how nice it would be to generate a graphic representation of what our teacher is saying in class. Well, RSA not only thought of it, but also managed to realize it.

That’s one important lesson about design. Success comes when you make things simpler and follow your intuition. If you identify something that people want, or the way they like doing something, you should create tools compatible with that desire or liking. Apple is successful for this reason (among others): They create technological solutions that are intuitive, organic and fit our idea of ‘easier’ and more ‘spontaneous’.   

The RSA’s good design ideas don’t stop here. Today, I was almost speechless when I discovered the RSA’s website (http://www.thersa.org)

This is, definitely, one of the best-designed websites I’ve ever seen. It’s visually pleasant, you feel prompted to read all of it. The way information is organized is clear and relevant to the visitor. The colours are good. All the important information is available within three clicks. The site is an excellent support to their communication, advertising and branding efforts.

RSA is a smart organization doing smart things for the world. Clearly, part of that intelligence has been put to work in creating a exquisite design for their website.

  

I was on the Moon

Not literally. I went there virtually on an electronic journey. I found this website by pure chance: and immediately loved it. It was, simply, one of my biggest childhood fantasies made real. I had direct and complete access to the Apollo 11 mission with one big bonus: I controlled the pace of the experience, chose what to see and repeated it as many times as I wanted.

 The website, created to commemorate the 40th anniversary of the man on the moon, is targeted mainly to school students and teachers. I love its flash design which immerses the visitor in the whole experience. This is particularly important since they are addressing kids with short attention spans.

I was also impressed by the sound effects. I like the use of the old radio transmissions as background. Makes it very real. This is a good example of how design can include more than the visual element. It can include sound also. The more technology advances, the more multimedia we can include in our online experiences. Maybe in the future we'll be able to communicate smells, flavours and touch through the Internet... Why not?

The site's navigation has a few interesting features:

1. Buttons that link to additional information:

They are conspicuous but don't break the site's harmony.  They cause curiosity and look as a natural part of the experience. Well thought and designed.

2. Navigation controls: 
They keep the visitor informed. You know where in the mission you are and how long it will take to finish.

3. Action Buttons: 

You have control of each stage of the mission. It's like a video game.

The JFK Presidential Library and Museum successfully took the library-museum experience online.

This is a great example of how it's possible to create a powerful internet experience with a well designed Flash animation and a simple to navigate website.

Design to move your site off the web and into the office

Website design doesn't have to be limited to the screen your viewer is sitting in front of. The increased use of handheld devices with internet access has expanded the way we can look at website design and led us to consider its incorporation into the objects that surround us.

Take this as an example:


QR CODE - Content-rich Resume from Victor petit on Vimeo.

QR codes can be scanned by smart phone users to be taken to a website (too often they are just taken to the companies standard website and not given specific information relating to what they have scanned -- but that's another post).

These codes don't just offer website designers the opportunity to get people to their site, but new ways of designing sites all together. In this case, the website is a YouTube video of the job seeker's mouth and audio of him listing his achievements. Such a video would be an interesting idea on a website showcasing his resume, but he has gone one step further with the design, combining the video with the physical resume every would be employer expects you to hand them. This not only ensures that the employer goes to you website but gives the presentation an immediacy and intimacy that is lost when a web browser gets involved.

Using QR codes and relating them to objects surrounding the people you are training could be revolutionary in e-learning. Why have a written description of how to operate a particular machine when your employee can hold up their hand held device to the QR code pasted on the machinery involved and follow a step-by-step video on how to operate it? Why use Captivate to list a particular process when QR codes can be added into the salient parts of the processes documentation and the trainee can learn how to follow them when they reach them?

Developing websites to work with QR codes and hand held devices also increases learner engagement by linking tactile movements to e-learning. Scanning the appropriate objects, aligning videos in boxes, just placing your handheld device on the right spot of your training desk engages the learner's mind in a way staring at a computer screen never can. Suddenly, what you are learning is actually part of your work environment instead of a distant process glowing in front of you.

Of course, website design for this sort of e-learning course is completely different than for a normal e-learning site. Videos need to become part of the objects they are designed to explain. That doesn't necessarily mean going to the extreme of the video above, but the site needs to fit in with or feel part of the real world environment that surround it.

Handheld devices are also horrible for lots of text, links and series of images. The websites designed for these types of courses need to be simple and direct, no clicking or searching - just the information the user needs.

In their design these websites need to be mindful of the fact that people are using them in the same mindset they use when interacting with their surrounding environment and not a computer screen. Simple touch screen features that use object instead of hyperlinks and audio and voice recognition to move through the site should be included.

Of course, a standard e-learning site linking to everything that is covered in the handheld course can be created as a reference page for once someone has completed their training. But now, when they look at it it will be associated directly with the objects or processes they are using in their job because of the hand held/QR training they have already undergone.

Information overload? Put it in a timeline

Memolane was designed as a platform for individuals in love with social media, but its potential application for web and e-learning course designers, project managers and even journalists is clear.


Memolane - See, Search & Share from Memolane on Vimeo.

Pulling Facebook, Twitter, Picasa, Google Maps, Flickr and Blogger (to name a few) into a simple timeline format makes information easier to process by breaking it down into smaller chunks in an annotated fashion that is easy to understand -- the order in which the information was posted.

It's a great way to pool information from different platforms without clunky widgets and make a site multimedia with videos, pictures and audio.