A blog by the Brick Factory The Brick Factory

Grading the New Mashable

Many, many years ago Christmas morning was a chaotic riot of laughter, terrific screams, minor injuries and general twitchiness. As amazing a sight and experience as the pile of toys was, there was the overriding stoic presence of my father checking his watch, waiting to put the hammer down and march us all off to church. The experience was as unnerving as it was exciting but with some planning (midnight Mass?) could have been so much better for me. It wouldn’t occur to me for years that my parents worked it this way to get a breather from my high-pitched squeals of panicky joy.

clip_image001

Mashable’s recent redesign presents all the content they offer in a way that gives me that same uneasy feeling. For me, there’s just too much thrown at the user. There is no top story, only The New Stuff, The Next Big Thing and What’s Hot all given equal importance on the page. Putting aside that fact that all three category headings are promoting the same thing basically, my eye bounces right off the page. Users will get used to this and I will as well, but I question a design that forces you to refocus every time you hit this main page. It’s a small, quickly resolved snag but it’s one that diminishes the otherwise pleasing user experience.

The infinite scroll and myriad social networking opportunities throughout are meant to be fun. I know fun. This isn’t fun. Besides those social media options attached to every article, the new Mashable Velocity graph is a clever widget that (once I learned its purpose) I skipped over with a vengeance. It measures the speed of sharing. I can’t believe I typed that. The sub levels are where this redesign works better for me. Big photography, logical layout and plenty of white space makes for an easy quick read. I don’t think many users will take advantage of the infinite scroll that is unfortunately included on the subs, however.

Homepage screenshot
clip_image002

The contact and other admin pages haven’t really been designed at all, but I’m sure they will be at some stage to match the new look. I don’t feel this redesign was rushed at all, and third tier pages get pushed to the bottom of the list frequently on bigger launches.

As far as basic usability goes, the site does a yeoman’s job for me. The navigation is where I need it and the design of the elements is very clean and easy to find. So the fonts are fine, the palette is good and the code is clean, but that infinite scroll and the lack of a visual bulls-eye is going to bug me. I’m wondering for how long the bottomless pit of content will be a web trend.

Mashable’s mobile app for the Android hasn’t been redesigned/updated yet and is surprisingly clumsy considering how much care had gone into the web design.
clip_image003
The new Mashable site is fully responsive, creating unique experiences for tablet and smartphone users accessing via the web.  The mobile web version of the redesign is tight and pretty easy to get through. The abbreviated navigation is a bit cryptic, and reads like a Pizza Hut promo (NEW, RISING, HOT) for me, but it’s fine and I’m likely being picky here. Also, thanks to coding limitations, I suspect, the infinite scroll is absent.
clip_image004

Overall grade is a B for me. I’m a Mashable fan and will continue to be as I fight the urge to sound like an old bag shaking my fist at design choices that rub me the wrong way. I don’t want to turn into this guy

clip_image005

7 Great Examples of The “Contact Us” Page

With the amount of media the average user interacts with on a daily basis, it is understandable why it’s so difficult to capture an audience. In today’s world, having a website is simply not enough. You must have an exemplary product or service, thought provoking content and ideas to lure in a visitor, and visually stimulating images and videos to get them to stay long enough to sign up. However, the experience doesn’t stop at the “contact us” page; it actually can turn the entire experience from a memorable one for all the right reasons, and turn it into a deal breaker. Reducing difficulty for the user is a must, and truthfully not as difficult as it seems. The examples that follow show how a great contact form can make this small yet important part of the client relationship convert as smoothly as possible, and in some senses make it fun!

1. How to Create Trust on Your Contact Page – spokespedicabs.com/

Spokes specializes in transportation via pedicabs specifically in Oak Cliff, Dallas, Texas. As their community grows, the need for more useful and reliable transportation has increased as well, and they make transportation fun. Their site is a single long page with links to jump around, or to simply scroll through. As the user progresses through the site, Spokes uses animated visuals with cleverly thought through dialogue, as well internal links to more information for the user’s convenience. The user can even view this simple contact form while scrolling through the site, fully aware of the personality and vision of this company.

2. Provide Assistance Along The Way – Golivebutton.com

Golivebutton.com provides a unique product for individuals that are trying to increase the amount of traffic they are getting on their webpage. Users receive a “Go Live” button that they share on their social network. From here they can tell their followers and new users about their work and hopefully gain new users. Their contact form is a playful and interactive form that actually provides the user with the product after giving their contact information. Each field clearly suggests what needs to be put in each field and from the homepage the user can easily see where to contact the site from. Small things such as arrows and images go a long way in helping users find the contact form, but ultimately, assisting them get through the form as quickly and easily as possible is the most important aspect of the contact page.

3. Important to Reduce Friction Everywhere – amoderneden.com

Looking to reach that inner kid inside, or to simply quiet down your own little one? Then you should probably give this company a call. Amoderneden.com has been developing design minded goods and toddler apps for the little one in all of us, and would love to help out with the new edition to the family. One look at their contact page goes to show that they understand how busy parents can be let alone a fellow designer of applications. From their fax number to their mailing list, the user can very easily contact them for inquiries concerning products, carrying their items in-house, or shipping problems care free.

4. Design for Mobile First – dibdig.com

Need a text book, cab, off campus housing, or late night pizza? Dibdig.com offers an application that allows you to do all of these things with relative ease. Their site utilizes the twitter’s bootstrap design language for easy mobile usage and convenient online navigation. Designing for mobile first is important for a number of reasons. First, large load times for mobile users can be an immediate turn off. If users aren’t able to get what they want accomplished immediately then they may not even return to try out your mobile site again let alone contact your site for your product or service at home. If the form is extensive then mobile users that have slow connections will be even more impatient, and most importantly, if they are already on their phone and you are providing a phone number then they can contact you immediately. With all this being said, your “Submit” button should check for errors upon submission, or in real time, to prevent any future problems for mobile users. Dibdig.com’s contact us page is short, to the point, and perfect for mobile usage for anyone; especially college students planning the rest of their day after the class they are sitting in is over.

5. Limit the Number of Drop Down Boxes – plaveb.com

Plaveb is an online business consulting agency that focuses upon manufacturing elegant web solutions for their end users. Since the business relationship and emphasis on growing client interaction are major factors for Plaveb it only makes sense that they have an impressively functional contact page. One aspect of the Plaveb contact page that sets them apart from competitors is their use of the drop down box. Now, according to HubSpot’s research only a single drop down is truly effective on any contact page, but in the case of Plaveb it seems to be a functionality that their users would appreciate. Users can begin the conversation of partnership right off the bat and everyone knows where everyone else stands. The selections in the boxes are well thought out, and directly relate to important information for the relationship. Overall, the use of this technique is very well represented, and other providing a similar service may want to follow suit.

6. Get Rid of Any and All Sophisticated Text Areas – thechemistrygroup.com

The Chemistry Group is a client specific organization that is known for increasing hiring accuracy, reducing attrition, and overall developing product sales and turnaround times through case studies and well thought through organizational change practices. Their website is informative as it is playful, and definitely leads you to learn more about them as a group. When you arrive at their Contact page though, the importance lies within the single text area provided. More than one text area for the user is overkill, and for anyone visiting this site or any for that matter that want to simply ask questions and potentially utilize their service only really needs that one space. The idea behind sophisticated areas is nice and all, but at the end of the day having the user convert and share their information is the only real goal. Multiple text areas are time consuming, and not necessary especially if they are a required field for security purposes. The busy user wants to ask their question, share their limited information, and hopefully receive a response as quickly as possible and on both ends of the spectrum a single text area allows you to oblige what will hopefully develop into a mutual relationship.

7. Security is Essential – joomla-monster.com

Joomla-Monster is an online store for the bootstrap grid system, templates, and more for the technology savvy consumer. Users can download a number of products to help improve their online presence and increase their knowledge of what makes a company successful on the online platform. Just as Joomla-Monster knows, in addition to all of the bells and whistles that are desirable with a company website, in today’s digital world, security is an increasing concern. Similar to the items that they offer on their site for consumers to purchase to improve security of their systems, Joomla-Monster does a good job of protecting their inquirers of products on their site from spam and lost information through their contact page. Today, individuals are able to intercept e-mail addresses with ease, people can blow up e-mail addresses with spam through contact pages, and overall make the entire collection process of potential new clients and inquires very difficult through contact pages. The anti-spam verification, required e-mail, name, subject, message, and regarding fields ensure that no loose information is forgotten or slipped through to the next page. If you do not fill out any particular field, you are bounced back. As technology continues to become more complex and powerful it is important for anyone asking for user contact information to take all precautions to protect their clients. Not only will it make your clients feel a bit safer when asking questions, but make you look more responsible.

Happy Holidays

As a way to celebrate the season, we have created a special edition of our Brick Factory homepage featuring a holiday message for our friends and family.  As a small way to give back, we will donate $1 to the Wounded Warrior Project for every person that views the message on our homepage between now and December 31.  Our homepage will update with a live tally as more money is raised.

So please visit our homepage, and encourage your friends and family to visit as well.  Total donations to the Wounded Warrior Project will be capped at $1,000.  Update: We ended up raising a total of $715 for the Wounded Warriors.  Thanks to everyone for their help.

On a related note, the Brick Factory team had its annual holiday party last Thursday at Zatinya in DC.  The whole night was fun, but the highlight was probably our Secret Santa gift exchange that took place late into the celebration.  You can view a full photo set over on our Facebook page, but I’ve included a few below to whet your appetite.

Teddy Taylor posing with his brand new “I Love Hannah” coffee mug.  The mug was given to him by Hannah Del Porto, who is also pictured.

hannah

Chuck Fitzpatrick unsuccessfully tries to break the new stress ball he got through our office Secret Santa.

chuck

Ron Isla posing with an inflatable tiger head.

ron

Solving Our Dishwasher Problem

At the Brick Factory headquarters we have a shared dishwasher.  Being adults, we don’t really need a formal system for managing our dirty dishes.  People put their dirty dishes in the dishwasher and someone runs it when needed.

We have one problem.  After the dishwasher is run we count on the next person that goes into the kitchen to put the clean dishes into the cabinet.  Most of our dishes are glasses that have been used to drink water, so it is surprisingly difficult to tell whether someone has run the dishwasher or not.  So there have been occasions where clean dishes have been washed twice or dirty dishes have been put back on the shelf inadvertently.

To solve the problem we thought about establishing procedures around emptying the dishwasher.

Maybe create a schedule where we would rotate who is responsible for managing the dishes each week?  Way too much trouble.  The cure is worse than the disease.

Maybe have one person be in charge of running and emptying the dishwasher all the time?  Not how we want to run the company.  We’re adults and no employee should have to clean up after other folks as part of their job.

So this minor annoyance persisted.

Last week our VP of IT Ron Isla came up with a simple, elegant solution.  He went on Amazon and paid $3.65 for a magnet that marks whether dishes are clean or dirty (pictured below).  Problem solved.

dishwasher

In our work building websites, we run into problems like our dishwasher issue every day.

As with our dishwasher problem, our initial instinct is often to come up with complicated solutions that can often cause more problems than they solve.  We will try to program the problem away or come up with elaborate procedures for mitigating a problem that will only pop up once in a blue moon.

In nearly every situation, I’ve found simple, obvious solutions work best.  Ron’s elegant solution to our dishwasher problem is a good reminder of that.

Conversation Through a Browser: Tips for Humanizing Websites

Imagine a conversation with an old friend over a cup of coffee. You lean back in an over-stuffed leather chair as you casually discuss politics, the news and recount all the exciting things you’ve done since you were last able to talk. Its natural, your conversation isn’t forced and you even though its been months since you last talked your conversation just flows. Your friend understands the subtleties in your tone and picks up on your humor, anger and joy as your conversations jumps among different topics. It feels great catching up and you wonder why you don’t meet up more often.

Now imagine you’re in the same old coffee shop in the same comfortable chair. This time your friend has been replaced with an odd-looking stranger. Being the nice, outgoing person you are you attempt to start a conversation. “Hello, how are you?” you ask. No response. They must not have heard you so you reach down into your wealth of conversation topics and pull out old reliable – the weather. “Great weather we’re having, isn’t it?” The stranger blinks a few times but says nothing. Your normally charming demeanor is slowly turning into annoyance. Why won’t this jerk respond? In one last futile attempt you dig up your most charming smile and say: “I just love the coffee here, don’t you?”. The stranger yawns. Feeling oddly uncomfortable, you pack up your things and walk out of the coffee shop annoyed, but mostly confused.

At first glance, these situations seem very, very different but lets take a closer look. You’re in the same coffee shop drinking the same coffee. You’re sitting comfortably on the same broken-in leather. Same amount of people. Same charming you, trying to have a pleasant conversation. In actuality the only real difference is the response from your friend compared to the lack of response from the stranger.

At this point you’re probably thinking that this has nothing to do with websites but in a way it does. My argument is that a website should be like a great conversation. As we make decisions about information structure, design, and content we should think of it in the context of the give and take of talking to an old friend. Every website has elements that a visitor is required to interact with. Whether it be the site navigation, a contact page with a form to submit inquiries, or even something a simple as a link. All these elements make up the conversation a site has with its visitors.

So lets analyze a few real world examples, shall we? Let’s start with some examples that would constitute bad web conversation etiquette. Note that for sake of avoiding insult we’ll talk in generalities about common mistakes:

The Bad: Errors when submitting forms, difficult signup processes and making it difficult to get in touch

When someone gets to the point that they are going to reach out to you via a contact form, sign up for your email list, or create an account you typically want to capitalize. These are the engaged, interested visitors you want on your site. If your account creation form spits out an error when trying to sign up, your email list is hard to join, and your contact form is nonexistent you can expect to lose these folks right off the bat. Avoid common pitfalls like asking for extraneous information about a user on signup, making it difficult to get it touch and ask questions, and nondescript form errors. Consider how your visitors would like to interact and cater the experience to them – don’t make them cater to you.

The Bad: No custom 404 error page, broken links and blatant errors

These are some of the more frustrating errors on the web. Sending a visitor to your site to the default ‘This page cannot be found’ 404 error is about as worthless as you can get. Granted, 404 errors are bound to happen but its worth the time to implement a custom 404 page that at least shows in the context of your site. For a good example check out our client Panthera’s 404 page.

The Bad: Poorly organized navigation, buried information and a weak SEO strategy

Many an organization is victim to this. Too many nav points, information burried ten clicks into the site, and unclear wording are all common contributors to a bad experience. My best advice here (for most organizations) is to approach your site structure from the perspective of a visitor with no previous knowledge of your organization. Think of the types of information that would be relevant and what types of actions they would want to take. Trust me, it will go a long way.

Now for a few examples of sites that get it right. We’ll use some real examples here as everyone deserves a pat on the back now and then:

The Good: Formly’s Form Building Process

Formly is a tool to build mobile friendly forms and collect information. I stumbled across this application a few weeks ago and I have to say, I am very impressed with the simplicity and their approach. Take for example their form builder. The introductory copy is great and their step by step walkthrough upon adding your first form field is fantastic. This is one of the better examples I’ve found of an easy-to-use, human focused product.

The Good: GoSquared’s Login Screen

Here at the Brick Factory we love the little details that go into sites and GoSquared obviously does too. Their login page is a masterpiece and shows amazing attention to detail. Things like bringing in a personal image and suggesting fixes for mistyped emails go a long ways in making an experience great. Check out their blog post for some additional details.

The Good: MailChimp’s Chimp

MailChimp has accomplished what Clippy the paper clip could only dream of. The MailChimp mascot is not only fun and lighthearted but also provides useful tips and information regarding your account and emails. This is one of the best examples of giving your site personality and a voice around. As you use their tool, its enjoyable and easy which is reflected perfectly in their visuals and tone.

Have any additional good or bad examples? Let us know in the comments!