One part of this series that really caught my attention was that a lot of research indicates that the tech sector will be creating millions of jobs by the middle of the decade.
“The research and consulting firm IDC estimates that 1 million new technology-related jobs will be created over the next four or five years â an increase of about 10 percent.”
So what does this mean to employers? The other big take away is that if your company is positioned for growth in the coming year you may want to think about hiring, purely based upon the fact that there is REAL talent out there now that may be unemployed.
The other message for employers is to prepare for the future by taking care of the talent you have now, because once the economy starts to turn around technical talent it will be tougher to find and tougher to retain. This brings me back to a post that now infamous software company owner, blogger Joel Spolsky wrote a couple years ago called “A Field Guide to Developers“.
Joel’s points from 2006 still ring true today for our creative, technical work force and how to retain and recruit great designers and software developers.
Every technical manager that hasn’t read this article should, because it is a great guide on how to prepare for the future when the economy turns around.
Do you remember when Cuil launched in 2008? Two ex-Googler’s, Tom Costello and Anna Patterson started the search engine, claiming to have the largest index of website (over 127 billion). Even with its large index, they still had the near impossible task of going up the 800 pound gorilla called Google. Also in my opinion, it does not matter how big your index is, if you do not show the most relevant websites for a given search, what’s the point?
As you can see, it has taken a huge dip since its launch and continues to decline.
This goes to show you that just because you claim to have the biggest index, doesn’t mean you can compete and steal market share from the “Big 3” (Google, Yahoo, Bing). Google is where they are at today because they focus on innovation. They pride themselves on providing quality search results by constantly improving their algorithm and adding new features. This is something that I believe Cuil needs to improve on in the near future or continue to fade into oblivion.
Mashable wrote a blog post in August on how Cuil is re-emerging as a real-time search engine offering a number of new features. The problem is that even with the focus on real-time search, they are a little too late. With real-time search engines like Twitter Search, OneRiot and Tweetmeme, who have already gained market share and offer better user experience, Cuil is just a day late and a dollar short.
Personally, I have done a number of searches in various industries and have seen a number of sites that have no business being ranked on the first page. It should be interesting to see if Cuil can regain momentum in 2010 with their real-time strategy.
Those who think video games are not educational, this post is for you. Not only can video games be an enjoyable experience, they can teach us many things. Websites and video games often use similar concepts about usability in order to achieve an amazing end-product. I’ve come up with 6 essential concepts that video games can teach web designers about usability.
1. Users Have No Patience
Regardless of what the product is, users will get frustrated easily if they have to wait a long time for a response to an action. Nobody likes a loading screen in a video game. While loading screens can be minimized in multiple ways, it is hard to eliminate them altogether since they use disc-based media. Developers try to keep the user entertained by playing background music, customizing the loading icon/progress bar, or displaying information such as history or facts during the load time. EA Sports FIFA 09’s loading screen has the user play against the goalie in a practice environment while the game loads.
For Web usability, this means that new pages must display within 1 second for users to feel like they’re navigating freely; any slower and they feel held back by the computer and don’t click as readily.
Jakob Nielsen – Alertbox, October 5, 2009
On the web, loading screens are most associated with Flash. Flash applications almost always have loading screens. If something takes more than 1 second to react, most users will get frustrated and leave. Even the simplest of things such as a hover element should not have a delay. Bandwidth is becoming less of an issue these days and websites should be able to make the user feel as if they are in total control.
2. It’s All About the Experience
Even the elderly could not resist the Nintendo Wii (source: BBC)
Why do people play video games? Simple: They want to have fun and enjoy the action, however that is defined. Modern games increasingly try to engage the user by making the games contain a strong storyline and mirror elements you would find in the cinema, such as recent popular games like Grand Theft Auto 4 and Uncharted 2. Since these games are attempting to be more realistic, it is no surprise that the video game industry is overtaking the movie industry. Instead of watching great movies, you get to feel like you are in one, with full control of the characters. The creative interaction is the key rather than just eye candy. The Nintendo Wii became popular among traditional and non-traditional gamers due to its unique interaction, even though its graphics were inferior to other gaming consoles.
On the web, the experience is what keeps users coming back. E-commerce websites are particularly focused on the experience because they want potential customers to feel like they are shopping safely and securely. Users browse the web for information. It is how the website presents this information and, more importantly, how it gets the user to that information that makes the experience worthwhile. Amazon and eBay have been pioneers in the e-commerce world and their strong returning customer base proves that they know what they are doing.
3. Progressive Enhancement is Good
This generation of video games are now available with HD audio and video. If you own a system capable of high definition like Xbox 360 and Playstation 3, you can take advantage of high quality graphics and sound. Not only can games look more crisp and realistic with vibrant colors, they can also produce uncompressed multiple channel audio that makes you feel like you are in the game – literally! For those who don’t have an HDTV or a modern surround sound system these systems will simply downgrade those features and play the game as normal. The games will always function the same and sound the same – it’ll just be in a lower resolution and with only 2 channels of audio. No harm done to them. Progressive enhancement in action.
Websites are starting to show progressive enhancement as well with the use of CSS. Web designers try to reward users who browse with modern browsers (i.e. Firefox and Safari) with a beneficial experience that users of IE cannot have, without detracting from the functionality. Designers are using RGBa values, which allow them to include an added alpha channel to the element. This is a powerful tool to have in your designer toolbox because it allows you flexibility and control in overlaying graphic elements and to incorporate opacity variances into the design.
CSS Document
.element {
color: #fff;
color: rgba(255,255,255,.5) /* for modern browsers */
}
The example above declares a standard CSS rule for the text color. Older browsers who do not support CSS 3 will only recognize the first line and ignore the rest. The more modern browsers, however, will read the second rule and therefore ignore the first rule. The same concept applies to the CSS 3 border radius property and the CSS 3 opacity property (alpha channel on the entire box element). Andy Clarke uses transitioning properties on his website that are only functional in Safari. These properties, which make the DVD and disc animate on hover, can provide some unique design interactions. Taking these concepts and applying them into websites gives users a unique experience and at the same time doesn’t take away the essence of the design entirely for those who use, well… IE.
4. Minimize Learning Curve by Including Tutorials
Instruction booklets are becoming less used these days for video games. Developers are now putting tutorials into the game and having the user learn as they progress. Most typical games will have the first level or so of the game be the learning grounds for the rest of the game. This is becoming a de facto standard in the industry. During this time, users will be prompted with basic controls and developers will design the level to make sure the the controls are used properly before permitting users to continue the game. These learning tools help minimize frustration and also get the user prepared. What better way to learn than to actually try. Reading instructions is not as effective.
Websites need to be careful about introducing new objects or applications to the user. If you suspect a user will have to think about how to use a particular part of your website, you will have a problem. Users will need assistance with it – whether it is simple instructions or a video tutorial.
5. Keep the Interface as Simple as Possible
In-game menu. Better watch your back! (source: Game Trailers)
Interfaces are extremely important in grabbing the user’s attention. Video games are coming up with some creative ways of designing their interface. While being creative, they still function the same and are easy to navigate. Nobody wants to be confused about where they are or how to get out of the location they are in. Navigation should be carefully thought out. Dead Space uses an intuitive in-game menu where your menu pops up in front of you while you are playing the game. There is no interruption from action as you still have control of your character. Madden NFL 10 uses a simple menu system that zooms to different parts of the stadium in the background based on the navigation section you have chosen.
Websites must remain simple to use, or users will get frustrated and leave. The UI needs to make sense and be engaging at all times. Breadcrumbs are important for sites that are large, preventing users from feeling lost.
The ability to simplify means to eliminate the unnecessary so that the necessary may speak.
Hans Hofmann
6. Don’t Rely on Graphics Alone
Great graphics, but unusable controls, make this game hard to recommend
Those who remember Grand Theft Auto 3 can agree that it was not the most beautiful looking game around at the time of it’s launch. That said, they will also agree that it was the best game to play at the time and it was a huge hit. Graphics can’t do it alone. The experience also needs to be great. GTA3 was impressive because it had an engaging storyline, incredible controls, and was a blast to play. A game with pure eye candy and no functionality will not last long in this industry.
On the web, user experience needs to be priority over design. Once a site functions properly, then you can apply the interface to it. Just like a chair, it needs to function before it looks great, otherwise it is useless. Plan out your websites carefully and make sure that you are considering all aspects exhaustively. Just like video games, a website can be popular if it functions and is enjoyable but will be useless if it’s just eye candy.
So, what are your thoughts on video games and web usability? Do you have any other comparisons? We’d like to hear from you!
Ever looked at the brands that are visible in a magazine? How about down the grocery aisle? Fact is, brands are extremely important to the success of a business. Brand identity shapes perceptions and perceptions determine sales. It’s a simple formula, but hard to master. Off the top of my head, I can name a few brands that immediately come to mind: McDonald’s, Apple, Nike, Coke, Honda, etc. All of these companies have extremely popular brands; consumers can instantly recognize their identity. The reason why we recognize them so well is because each one followed some guidelines in designing their brand’s identity.
“The most powerful and enduring brands are built from the heart – if people believe they share values with a company, they will stay loyal to a brand.”
Howard Schultz (Chairman and CEO, Starbucks Coffee Company)
The following are some guidelines that I believe are crucial to any identity that a company wants to market effectively:
Minimalism
WWF
Designed by Sir Peter Scott, in 1961
KISS (keep it simple stupid) the logo
Donât make the design unnecessarily complex. Logos can be seen from different distances; therefore it needs to be universally noticeable. The design should be able to maintain its detail.
Color
It should all start with monotone
Because there are people out there that may have a disability in their color vision, it is important that logos be designed to give the same effect and meaning with or without color. Therefore, it is important when designing a logo to start with simple shades of black. Colors can then be applied afterwards to enhance the visual.
Maintain global recognition
Color is important to the brand because it unifies everything together. If the client already has a color scheme specified, the identity must follow the scheme accordingly (even if the scheme is not appropriate). On special occasions it is allowed to suggest a more appropriate color scheme.
Shape
Shell
Designed by Raymond Loewy, in 1971
Rely on shape – not effect – to express meaning
Keeping accessibility in mind, it is important to design the identity in which the meaning is expressed by its shape, not by its effect. So make sure that the design itself doesnât rely on fancy patterns that could become useless in some mediums. We tend to recognize shapes first, especially from afar.
Typography
Don’t underestimate the power of type
In some cases, the brand doesnât require an icon, therefore relying on type entirely. The type should be visually balanced, especially if a tagline is to be embedded with the identity.
Avoid extraneous details
Speaking of taglines, it is best to let the client know that taglines are meant to be used outside the logo itself. Try to make your clients aware that taglines can change much more rapidly than the brand themselves. Other details to avoid are the technical names in a company, such as LLC, Inc, etc. These are meant to be included in documentation where it is relevant and warranted. This might be a hard rule to follow – because of the client’s demands.
No more than 2 fonts are necessary
Continuing with the visual balance, it is a good idea to minimize the number of fonts used. The font family is the first priority and then the font style. If using two fonts, make sure the font families complement each other.
USA Network
Designed by Peloton Design, in 2005
Flexibility
Always use vector!
It is necessary that all brand identities be designed using vector graphics (composed of paths) as opposed to raster graphics (composed of pixels). Adobe Illustrator is the de facto standard program to use. This is essential because it enables the identity to be scalable without the quality deteriorating.
Make it cross-media compatible
There are many different types of media, each with their own mediums. It is important that the brand identity be able to be reproduced across all of these. The three primary types are web, print, and broadcast. In particular for print media, the identity needs to be able to be reproduced through offset, flexography, screen, gravure, and digital printing.
Trend
Think trend-proof
While it can be greatly influenced, current trends should not be the primary focus of the brand identityâs design. The design should be able to withstand current and future trends.
Uniqueness
Don’t replicate, innovate
Try to be creative and donât rely on what others are doing in their designs. It is okay to observe for inspiration, but donât steal from others. Focus on the purpose of the identity and determine the best course of action.
Don’t use stock art
Donât rely on art that is available to others. Not only does this void the logoâs uniqueness, but it implies poor judgment on the designer. However, taking shortcuts by morphing stock art into something unique is okay in some cases. Again, focus on the purpose and make sure that you are taking the best approach.
Scope
Design for the client, not for the designer
The client is the one that is paying the bill, so it is best that you try to make them happy first. Just because a wild font may look awesome to you, it will not necessarily look awesome to the client. Always refer to the primary purpose of the logo before daydreaming on the design.
Here’s a problem I bet you’ve run into before. You have a long-running function on one of your .NET pages and you want to provide real-time feedback to the user while they’re waiting on the function to complete (by function, I mean a method or a set of methods in the code-behind). So you put a variable somewhere on your page and you update it as the function runs. Then you realize that the variable value won’t actually change on the front-end until the postback is complete, which in turn means that it will get updated only once and say “Finished.” Just in time to tell the user what they already know.
To get around this conundrum, I present to you jquery and ajax, my two favorite web technologies ever. AJAX is a group of technologies that allows you to interact with the server from the client-side without affecting the behavior of the existing page. What this means is that you can post to a page without getting the associated postback from .NET (and subsequent page refresh). If that doesn’t sound important, trust me, it is. If we can post to a page without getting a postback, then we’re already pretty close to real-time updates. All we need to do now is use jQuery to update the DOM as we do posts. Sound complicated? It isn’t.
Back to our example, suppose a user clicks a button and that button fires a postback and runs 3 methods in the code-behind, DoStep1(), DoStep2(), and DoStep3(). The first thing we need to do is simply move these methods to a new page. If your original page was called DoWork.aspx, then a good name for the new page would be DoWork_Ajax.aspx.
Now, back on DoWork.aspx, you probably have an asp element on your page that you’d like to update as the functions progress. You can replace this with a standard HTML element. DoWork() is a javascript function that will update this element. It looks like this:
Assume that #update-message is a span on our page, i.e. a placeholder for the status of our worker functions.
The logic flows as such: If we’re on step 1, tell the user we’re starting. If we make it past step 3, we’re done, so tell the user that too and return from this function. Finally, the meat of the function – Do an asyncronous post to DoWork_Ajax.aspx, telling it what step we’re on, and injecting a span from it into the DOM for the current page.
The PageLoad method for DoWork_Ajax.aspx looks like this:
switch (Request["workStep"])
{
case "1":
DoStep1();
break;
case "2":
DoStep2();
break;
case "3":
DoStep3();
break;
}
Each method updates an element on the page, just like before. This is the element that gets injected into the DOM by our jQuery function on DoWork.aspx.
You’re doing the exact same work as before, but now you can update the page in real time. I’ve included a sample application that demonstrates everything I’ve talked about. For those that are interested, you can download the project and run it locally to see this in action.
Internet users have little patience when browsing websites.
More often than not, users are on a mission and are determined to find specific information. You [as a company] get one chance to impress your targeted audience with your design. Based off of previous studies, users can judge your website in as little as 50 milliseconds!
Does Apple give you a good first impression about who they are? Still curious?
Most designers would think that they should focus solely on the home page design, thinking that the users would go there first. On the contrary, users could possibly land on any of the pages in your website through search engines or outside links from blog posts, emails, websites or more.
A research team lead by Dr. Gitte Lindgaard found that people can make rough decisions about a Web page’s visual appeal after being exposed to it for as little as 50 ms. In her study, she had participants judge websites that were flashed on a computer screen for 0.05 seconds. It is worth noting that most users don’t actually browse the web in this same manner; however, it informs us that users can make decisions rather quickly. Most eye tracking studies show that the human eye can quickly skim over a page. It is almost a general rule of thumb in usability that all Internet users browse or scan websites, not read them. This directly elevates the importance of content usability.
0.1 second is the response time limit if you want users to feel like their actions are directly causing something to happen on the screen. For example, if you click on an expandable menu and see the expanded version in less than 0.1 seconds, then it feels as if you made the menu open up. If it takes longer than 0.1 seconds for the revised state to appear, then the response doesn’t feel “instantaneous” â instead, it feels as if the computer is doing something to make the menu open.
Thus, to create the illusion of direct manipulation, a user interface must be faster than 0.1 second.
Jakob Nielsen
Judge Me in a Heartbeat!
BP keeps their home page clean and concise, allowing users to skim effortlessly
First impressions are critical to keeping a user curious about a website. Chances are that if you don’t make a good first impression, you’ll lose them permanently. Websites that use enhanced usability strategies are more likely to keep the user from bouncing. Some of these strategies include:
Donât Make Me Think
As a rule, people donât like to puzzle over how to do things. If people who build a site donât care enough to make things obvious it can erode confidence in the site and its publishers.
Donât lose search
Some people (search-dominant users), will almost always look for a search box as they enter a site. These may be the same people who look for the nearest clerk as soon as they enter a store. This can be an exception to small sites with very 1-2 levels of structure.
Make it easy to go home
Having a home button in sight at all times offers reassurance that no matter how lost I may get, I can always start over, like pressing a Reset button or using a âGet out of Jail freeâ card.
While it may be hard to judge anything in as little as 50ms, the key fact is that people can be hooked or discouraged by a website’s design and content rapidly. It is always good practice to test your site designs for usability and see what participants think of the site. It only takes a handful of people to determine distinct patterns on what is right or wrong.
So let’s hear from you. Let us know your experiences when browsing a website for the first time.
