You may remember earlier in the year when Google mentioned a “semantic search” was in the works. Well, as of yesterday, it’s here. In a recent post on the official Google blog, Senior Vice President of Engineering Amit Singhal explained the next big thing from Google – The Knowledge Graph. The concept is fairly simple, instead of just returning a list of websites that have keywords that match the string of characters that comprise your query, Google does that and attempts to deliver information that might pertain to the subject.  In short, the search engine attempts to understand exactly what you’re getting at in order to deliver relevant content; not only possible websites that might match what you’re searching for, but also images, birth dates, locations, prominent works, recipes, and similar scientists/artists/architects/churches etc.

But any old search engine can show a mini Wikipedia article. The genius behind the Knowledge Graph is how it guesses what your query was intended to actually mean. You may recall back in January, Google revised their privacy policy to promote cross-platform information sharing on an account and a trimmed down privacy policy. It also allowed Google to collect data more efficiently from its users. By tracking almost everything you do on a Google service, Google is now able with the Knowledge Graph to better tailor what exactly you’re looking for.

For instance, the example Amit Singhal uses is the Taj Mahal, Now if you enter [Taj Mahal] into google, it has no way of knowing if you mean the iconic monument, the accomplished blues musician, or any number of Indian restaurants that use the name. With Google Knowledge Graph, the results can be much more tailored. Say in your google+ account, you’ve mentioned an affinity for Chana Masala, and in your gmail account you asked some co-workers if they’d like to go out for some Indian food for lunch. “Sure!” they say, “we should go to that Taj Mahal place that opened up, where is it?” Well, google it, duh.

Knowledge Graph takes the information from those disparate Google services, and binds them together (with possibly, and this is simply conjecture on my part, time and location data) to give you a list of all the Taj Mahal Indian Restaurant locations near you. It forgoes the way more famous monument and musician to display what it thinks is the most relevant data to you at the time.

Ok, But What Does it Mean for SEO?

Reception has been subdued among the SEO community.  As it is fairly new, advice from SEO experts has been mostly to remain calm and carry on. Essentially, keep building websites with SEO oriented markup (which is to say, good markup,) and develop deep, well done content. The eyes are to the future, however, as this does have the potential to shake up the status quo. For instance, Wikipedia, which has long dominated google page rankings, might take a traffic hit. Because a basic outline of information is being displayed right on the google search page, people will only need Wikipedia for very specific questions. With “things” getting more and more emphasis than “strings,” or simple keywords, content is king.

Nowadays, not having a presence in the mobile-accessed web or not giving users a decent mobile experience is a liability. Having a mobile version of your site or a complimentary mobile app is a tremendously great idea, but execution is never cut and dry. There are actually many things to consider, and exactly how your site is developed is one of those considerations. We’ll go over the three biggest ways to get your content mobile.

Native App: The Best Experience

native Apps are essentially software programs that are created to run on a specific platform. This approach offers great user control, access to all the phone features (gps, camera, etc), offline access, and great performance.

Native Apps fit the phone like a uniquely tailored glove, and that is also part of their problem.

See, an app developed for the iPhone (43% of US market share) isn’t going to work on an Android based phone (48% of US market share.) To reach the broadest swath of users and customers,  you’ll have to ask your developers to essentially develop two apps.  This can really start to cost, and if you’re not prepared to aggressively market and produce a quality piece of software, proceed at your own risk .

That said, if you’ve got a great idea for a game, travel, or social media app, native app is a great way to go to for a great user experience.

Mobile Website: The Best Value

Responsive Design, a rapidly growing trend in traditional web development is built on the principle of “websites should work, and provide a great user experience, on any device a user uses.” Using a series of techniques that resizes content and/or alters the layout based on the resolution of the device being used, developers and designers can create one website that looks like it was built for a desktop, tablet, and phone all at the same time.

The beauty of this approach is that it is an elegant solution to the explosion of variety in screen sizes. No matter what platform or resolution, the site is going to look like it was built for that screen.

And this makes this choice the cheapest. You essentially build a website, and get a mobile version as a bonus (or in the case of “mobile-first” philosophy, you get a traditional website for free.”) What you don’t get is access to phone features like gps or camera, and because it is traditional web development essentially, you are shackled to the browser the user wishes to use.

Web App: The Best of Both Worlds

A lot like the mobile website, a Web App is essentially a website that your user is redirected to after putting in your url. Instead of interacting with your website, they are taken to an HTML5 based application optimized for running on a mobile device.  Not quite as robust as Native Apps but with more features than a mobile website, a Web App provides a middle way to reach users with both accessibility and interactivity.

Using applications like the open source PhoneGap or the proprietary Sencha to build the application, Web Apps can get to most of the on-board features of the phone (both android and iPhone platforms simultaneously.) This means your web-based application can act like a native app, but you’re still shackled to a browser. That, and a cost that is only slightly less than a Native App are the tradeoffs for being so versatile.

While there are a lot of things to consider before you even get to the design and development of your mobile presence, getting mobile is becoming more and more imperative in today’s increasingly less desk-bound world.

Gamification is one of those relatively new terms that describe something marketers have been doing for years –enticing customers with a level of interactivity.  Recently the old tactic of putting the baseball card with the gum has breached into the web in. Web professionals have been borrowing concepts and philosophies from the gaming industry to create user experiences that actively engage the user vs. passively present information. Introducing badges, point systems, or leaderboards make users want to actively participate in the site which can be used to convert users to customers.

And therein lies the problem with gamification. Users, when introduced to game elements in websites, become hyper aware of contrived attempts to make them buy things. Gamification is best dealt with lightly, a subtle approach that doesn’t explicitly exist to create conversion. A duplicitous approach that tries to get users to do something they might not otherwise do could wind up hurting in the long term, and goes against concepts of good user experience philosophy.

Instead, gamification should be used like spice, just enough to enhance the dish, not enough to overpower the main ingredients. Take a sign up process. Part of any game is a goal, in this case it’s going to be the completion of the sign up process. In order to get a little more content, break the sign up form into segments, and add some emotional design to really get some resonance with the user.  Add in a status bar that keeps track of the user’s progress and make certain parts, like learning how to use the service the site provides, interactive.

Typically making a process more complicated goes against traditional user experience, but I don’t think we lose too much by breaking up the process into easily digestible chunks, especially if we add in things like emotional design and gamification to make the user want more process to explore. Also, it’s not as if this exact process hasn’t been tried before, some site are using a similar model to teach new users how the site works.

Ultimately, gamification should be used to add a little special something to the user’s experience of a site.

I’ve always been a guy to root for Microsoft.  I really couldn’t tell you why, maybe it’s the need to stick up for the truly nerdy kid with the A-Team lunch box in high school.  But after anyone does any amount of front end web development, Microsoft’s veteran browser, Internet Explorer, gets very, very hard to defend from the cool kids.

Tell me with a straight face you'd carry this to school. Yeah, me too.

Versions 7 and 8 are bad browsers. There, I said it. Well, from a development view anyway. From a popularity standpoint, IE is just as good as Google’s Chrome (a browser that is light years ahead.) And this is why developers and designers are shackled to Internet Explorer. Because 7 and 8 have such a large worldwide market share, clients demand that their sites be presentable on these browsers.  And that is fair, they’re paying good money for quality web development and design.

But there is hope on the horizon. IE9, which is already out, was a step forward for Microsoft. Not as big a step as was needed, but it demonstrated a desire on Microsoft’s part to play nice when rendering code in accordance to web standards. There are still some shortcomings, but IE 9 is a decent browser. Part of the IE9 marketing campaign even pokes fun at its history as a troublesome browser in a genius bit of emotional design.

Internet Explorer's Answer to The Problem its Had For Years

What has me excited, though, is the next iteration of Internet Explorer. IE 10 is slated to come out alongside

Microsoft’s next big thing – Windows 8. From the previews and reviews out by the critics, Microsoft’s Internet Explorer is not only back, but back with a vengeance.  With better CSS3 and HTML5 support, IE10 is poised to be right there with the Webkit browsers (Chrome and Safari) and Firefox on complex interactivity and graphic rendering.

So, with Chrome nipping at the heels of aging and ineffectual Internet Explorer versions, and the world waking up to the idea that they can have a better browser than the one they found installed on their computer, IE 10 comes at just the right time for Microsoft.

But in the meantime, if you’re using a browser your computer came equipped with, do yourself a favor and grab Chrome.

There is something sterile and safe about the gray, square “Next” button. It does everything it needs to do in order to fulfill its duties in the User Interface. It indicates what it does, it provides the metaphor of a button to indicate it is an actionable item, and it certainly does navigate the user to the next step or page. The ever dependent, diligent, dry, drab, dull “Next” button.

Feedburner.com cools your jets trying to get to information it doesn't have yet, but in a really disarming way.

What a waste of possible user interaction, though! I think we can do better than that in this age of heightened user expectations from their web experience. More and more, the best designed websites and applications take into account an emotional connection – be it humor, whimsy, or even merely a conversational tone.  MailChimp.com is an oft-cited example of emotional design done just right. Not just “Learn More,” but “Need Convincing?” Not just “Features” but, “We’ve got tons of features.” There is a multitude of ways, from graphics to copy, that Mailchimp.com opens up to its users.

What if instead of “Next” that button said something more personable, like “To the Next Step” or perhaps something with even more character like “Ok, Now What?” with an arrow icon? The Devil of great User Interface design is in the details. After the basic functions of a user interface are established, it’s time to break out the polish and really look at how you can better engage customers through emotional design.

Of course, there is always a risk with emotive design. If you didn’t do a good job in pinning down the target audience in

Skype's little easter egg lets you know that it is displeased with your typeface choice.

the discovery phase of the web’s development, you could wind up playing on the wrong emotions of the wrong audience. But the rewards are tangible. Decreased bounce rates and better retention because users want to explore and engage the site. Convincing stockholders in the website’s design that exposing the image of the client to a little risk is a monumental task, but in a world where we expose our own personalities

to the public through social media outlets every day, it’s not crazy to expect our websites to expose some personality too. If you’re interested, you can read more about Emotional Interface Design complete with great examples here at Smashing Magazine and here at Think Vitamin

Web Development, like most everything, is a process. Building a strong foundation of understanding is imperative for how the work plays out later on. This is what the Discovery phase of a project is all about. In an earlier article, I talked about prototyping a site’s layout. Before even that, some questions should get answered. Both developer/designer and client need to really think about these questions and get as specific as possible to get the best out the process of building a website.

What does the company do? A fundamental question that must be understood. It really should go without saying, but making sure your developer understands what you do or, from that developer’s standpoint, understanding exactly the scope of what your client does is imperative to establish the boundaries of what the site is intended to do.

Who are the stakeholders and what are their roles in the site’s development? As the client, make sure your developer/designer knows who he or she is dealing with. Conversely it’s a developer’s mission in discovery to figure out who is concerned with the design of the site, who is responsible for how the back-end should work/flow, and who ultimately is in charge of the overall project.

So, What’s the Site Supposed to Accomplish? You’ve got a comprehensive understanding of what the company does, and who is invested in the site, but other than having a presence online, what’s the site going to do? Establish the nature of the site – is it commercial? Informational? A marketing platform? More often than not it’s a combination of these things, and the nature of the business will influence this. Write it all down. Be specific.

Who is supposed to use this site? Identifying a target audience really helps set up the framework of the design later. Everything from font size to margins to copy writing can be influenced by establishing who the site is intended for. If there are disparities between the target audiences, look for common traits, and list out some adjectives/adverbs that appeal to each.

Company X is like a Tyrannosaurus Rex on a Rocket Fueled Sopwith Camel. Metaphors and similes can really help a designer/developer sum up what the company is about. Take the example in the title of this section. What is the image? Getting away from the ridiculousness, you learn some things about Company X. It’s got whimsy, but masculine, with perhaps a sci-fi vintage feel. Company X is not afraid of being out there. Company Y, on the other hand, is a stately mahogany wardrobe in a quiet sunlit room. You get a completely different feel for Company Y. Understated, calm, perhaps slightly heavy centerpieces surrounded by a lighter air, gender neutral with brown and beige tones. Come up with some metaphors; compare the company to things it typically would not be compared to – animals, different companies in different sectors, cities.

Don't panic. This makes sense in context.

A good discovery period is a vital, but unfortunately overlooked, part of the web development process. Don’t let the excitement to get something committed to the screen overtake good web development processes.

On Fortune’s list of 100 Best Companies To Work For, The Container Store comes in at #22. The Coppell based company recently held a Grand Opening at their new Arlington location, the old Borders, in the Highlands shopping center. The Container Store used to have a location in Arlington some years ago but decided to make the move to Southlake thinking their customers would follow, turns out they didn’t. However, it looks as though the new Arlington location will see some great success. This was a grand opening (see video) that looked like lots of fun, with dancing, food, and wine! As the Arlington area continues to grow, more and more retailers are moving to places like the Highlands. Cotton Patch Café, offering home-style cooking, will begin construction in the Highlands this spring with plans to open soon after. Retailers and restaurants flocking to Lincoln Square, including Blue Mesa Grill, Ulta, and Michaels Arts and Crafts, hope to piggy-back off tourists and visitors who will come to Arlington for entertainment at Six Flags, Rangers Ballpark, and Cowboys Stadium.

One thing that businesses need to stay productive and maintain growth is to know who their audience is, what they are buying, where they are located, etc… When entering any market, research and data are gathered prior to making any kind of business decisions, especially when opening a new location. More and more, businesses are use information to find out everything they can about their customers and what drives them to their stores. Take for instance Target, the second largest retailer in America behind Walmart, who can predict a woman’s due date (yes Target knows when you are pregnant ladies!) within a very small window based on the products she starts to buy at the start of her pregnancy. When carefully studying one’s buying habits, with the help of experts, Target learned how to predict when we go through certain life events. Another finding was that when couples get married they tend to switch coffee brands, when they move into a new home they might start purchasing a different cereal. These fascinating findings can greatly improve and alter the path a business takes to reach its customers. So I ask, how well do you know your customers?

Your website is in dire need for an update. It doesn’t look great, uses outdated technology, and doesn’t do what it needs to for various aspects of your business. At some point, every successful website will need to undergo a redesign if it lasts long enough and is important enough to a business’s success. It might seem daunting, but it doesn’t have to be.

The Paper Prototype is the first thing you should do. What is a paper prototype? Exactly what it sounds like. It’s a pencil-to-paper rendition of the intended design. It might seem simplistic, but you don’t need fancy software to create a decent mockup for your new site. I was skeptical at first. As a new developer, the idea of using something not on the computer struck me as kind of out-of-sync. I had just begun a new project and had to double as designer (not my usual role, but in a smaller firm you wear many hats; that’s part of the appeal.) My PM insisted I was making the process too complicated for that stage of the project. She was right, of course. The prototyping phase isn’t supposed to be focused on the bells and whistles yet. It’s supposed to focus on how the site should work/flow, what elements should be used / where they should be placed, and the logic of the back-end. Ideally, pictures, colors, and other graphical elements shouldn’t be even there as they just distract from the important bits.

Realizing this, a computer assisted program might be a little over-doing it.  It’s cheap and easy to create and make changes to paper prototypes. And the prototyping phase is the best place to make these changes as usability guru Jakob Nielson explains. Paper prototyping is indispensable to cheap, rapid web development. It encourages note taking, margin jotting, and improvisational thinking because the method invites creativity by its very medium.

Paper prototypes don't have to be, and probably shouldn't be, pretty.

But, something does bother me about paper prototyping. It’s very much my own hang-up, but something seems so…unprofessional about it. So I used one of the many web-based mockup builders from around the Internet. My weapon of choice was flash-based Lumzy. It was my first mockup that I’d put in front of actual clients and wanted it to look like I took time in making it vs. some sketches on printer paper. Ironically, but not surprising, is that most of the computer-based approaches mimic then pencil-to-paper style. This is because paper and pencil strip down a design to its barest, black and white elements which are hallmarks of good prototype design.

Ultimately, good prototyping is about the function of the website, not the form. Pencil mockups are very simpatico with this concept. And if you’re afraid your forays into pen and paper design will end up looking a little…elementary, there are resources out there that can help you out with pre-designed elements like Lumzy or higher end software like Balsamiq. So, when you’re about to design or redesign a site, break out the old No. 2  pencil and start committing the usability and function of your site to paper.

It is almost cliché to say that the internet has changed drastically in the past few years with the introduction of our new Mobile overlords. Now, clients are not asking their web developers and designers for a site that exists only in one context, but for an application that can move effortlessly from desktop to tablet to phone.

So what is a developer to do? Recently, the concept of Responsive Design has taken hold in the web development world. Responsive Design is a set of best practices, techniques and design philosophies that aim to create a site that can exist comfortably in every resolution. With Responsive Design, a client’s site scales as needed and changes its layout as needed based on screen information the browser detects.

As with most things, examples are called for. Luckily, the web design blogosphere is rife with such examples . The hallmark of responsive design is scalability. And with these examples, you can see that the site maintains a cohesive aesthetic, but self-edits to show the best layout available to a particular device’s resolution. Widths scale down, images decrease in size, and ancillary information that exists in its own column on a larger resolution gets reduced to a link in a smaller one.

Morten Hjerde of Rift Labs and colleagues tracked data for 400 devices over 3 years.

I won’t get into the how; Other sites have done this better than I possibly could, but the why might be even more important to understand. Device resolution might not be a sexy topic, but it governs the environments in which users, clients, and developers cohabitate. The internet is getting more diverse, not less, and those environments are going to get more and more varied. Having a website that scales up or down to fill a device in the most efficient way possible is the only logical way forward in the Wild West of device resolution.

Text inputs, checkboxes, radio buttons, and the like are the primary way a site gets any in-depth information about its users. Forms are almost inescapable in any interactive web application and an absolute constant in any situation where shipping, credit card, or identification information is needed.

So, with such a vast importance, it is critical to think about forms from a usability standpoint as well when developing web pages. Here are a few guidelines –

1.)  Don’t use them if you don’t need them. You might want all the information you can get out of a user, but resist this urge. Never intend on calling someone? Don’t ask for a number. Don’t ship items? Only ask for a billing address, and even then – only maybe. When it comes to developing web forms less is always best. Know ahead of time what you need from users and stick to only that.

2.)  Label placement is a trade-off between completion speed and understanding.

• Use top aligned labels for information that is relatively mundane. Names, addresses, phone numbers, etc. can be entered rapidly by users. Aligning labels at the top allows for better scanning and thus quicker completion times and thus a happier user who doesn’t have to spend time wading through forms. This alignment naturally takes up a lot of vertical space and so isn’t best with long forms.
• Right aligned labels have a stronger connection between label and field, but are less easy to just scan as the eye has to re-orient itself for each line. The completion times for right-aligned labels are relatively quick. They also require less vertical space than top-aligned labels but generally are not suited to anything more than just one, maybe two columns of fields and labels.
• For information you want users to take their time on and understand, use left aligned labels. When you want driver’s license numbers, employer ID numbers, or anytime information is unfamiliar, slow down the user a bit with left aligned labels. Using this alignment tends to have a problem with label-field association as the label can be pretty far from its field if it’s a short word amidst some longer ones.  Fortunately, this type of label can be used sparingly.

Top Alignment

Right Alignment

Left Alignment

3.)  Know the difference between checkboxes and radio boxes

• Checkboxes are for when your user can select one or more items
• Radio buttons are for yes/no, this/that, white/black, male/female selections. Choices are mutually exclusive.

4.)  If you must use a cancel/reset action make it less noticeable than the primary action on the page. Pages should clearly indicate how one gets to completion, and by having the cancel or back button on the same visual hierarchy of the Go, Save, or other main-action buttons, you introduce some degree of confusion. Personally, I don’t like using these secondary actions at all because most web users are acquainted with the back button on their browsers and having them is just one more thing on a page usually taking up space.

5.) Why use so many *Required tags? This goes along with #1, but get rid of fields you don’t really need instead of indicating that they are simply not required. If you need a non-required field, denote that instead of indicating alllllllllll the fields that are required.

These are just a few guidelines, but most importantly when designing forms and form layouts, remember less is more. Faster completion times means you’ll likely get better data and have happier users. No one raves about good forms on a website, but people do notice when they have to fill out pages of information that doesn’t seem relevant.