Blog
Building a New Web: A New-level of Interaction
arrow
Click Here for Simple Demo
At the heart of the new development process while working on websites is the emphasis on improving how we interact with the websites we visit, and making them more intuitive to use for those that haven’t learned how to use a computer yet. Ideally, the websites will be intuitive enough that people will no longer need to use trial and error or follow tutorials before they understand how to use the site. A key element to that is providing real-time feedback without the need to take the user to a new page or make them refresh.
Now that the more basic elements of website design are well established, people are free to focus on making sure that the site is user-friendly and a joy to use. One way to accomplish this is to make the site more lively with subtle animations that give the user hints that they can interact with it. Users can hopefully appreciate the time that is saved whenever an action is made or feedback is given without the need to take them to another page. Instead, JavaScript is used to make the update right on the page they’re already on. It can show it instantly if it’s a small amount of information, but if that’s too jarring the developer might add in a little animation.
JavaScript has influenced a large part of the development of HTML5, and is also available to a larger percentage of the users on the internet than years prior. That in consideration, interactions in the way that provides real-time, easy to understand, and a level of consistency will most likely use your web browser’s built-in JavaScript capabilities rather than using an external plugin.
In my last post about animation, I mentioned how Flash still has it’s place in web design but simple interactions are the first thing to be changed from being programed in Flash to JavaScript. This really furthers the point.
Kurt Zenisek
Web Developer
Connect with me on LinkedIn: www.linkedin.com/in/kzeni
Henry Russell Bruce is a full-service advertising agency and Internet marketing firm that focuses on branding, developing and executing marketing roadmaps, and growing companies.
Building a New Web: Seamless Animation
For years now, there has been only one way to make things animated on the web. Flash quickly became the dominant technology for animation due to the complete lack of competition. It also provided a great vector graphics platform that’s capable of providing graphics with a very small file-size. There is another technology for animation, but it isn’t a fully-capable Flash replacement. JavaScript provides support for very simple positioning, resizing, and color animations, but doesn’t have the ability to do anything more advanced than that. Considering that JavaScript wasn’t built with the intent of using it for animation, things as simple as rotating an object simply aren’t possible so it isn’t a viable solution for most applications. What it manages to do is provide a nice middle ground between a static page and exporting and embedding a flash animation.
The latest development is an iteration of an existing website design technology called CSS (Cascading Style Sheets). CSS has been used for years as the primary technology for styling websites. When you view sites without CSS enabled they all look the same; white background, blue links, the same serif fonts, nothing positioned in the correct place, etc. Essentially, CSS keeps most websites from looking like they could have been made in Microsoft Word. This latest version of CSS (using HTML 5) is drawing the attention of web developers because it will provide full support for advanced animation.
Not only will CSS provide support for the basic animations that were availble through JavaScript, but it will also provide the capabilities of rotation, skewing, 3D, and more. There will also be a performance boost compared to other animation technologies, because CSS has been fully optimized for the single purpose of rendering graphics on a website. It will also be able to utilize the powerful graphics cards that computers ship with today, and that’s something that has yet to be taken advantage of on the websites that most of us visit.
It is important to compare Flash and CSS because it’s worth understanding the advantages and disadvantages of choosing one over the other. There’s no denying that Flash has a well-established install base and provides vecor graphics capabilities that are still some of the best out there, but for the most part CSS is giving Flash a run for it’s money in terms of animation. I’m not proclaiming Flash to be dead, but I definitely hope that this level of competition will push Adobe towards more innovative thinking than they’ve had in the last few years.
Kurt Zenisek
Web Developer
Connect with me on LinkedIn: www.linkedin.com/in/kzeni
Henry Russell Bruce is a strategic marketing and Internet marketing firm that uses research, brand-building, advertising, media buying and planning, design, public relations, Web design and strategies to help clients grow market share, generate new business, create brand loyalty and measure marketing results to build and support its clients' brands. HRB, founded in 1973, has offices in Cedar Rapids and Davenport, Iowa. For more information, contact HRB.
Website Design: Design For Your Audience
Often times we run into websites where companies have made the mistake of designing for themselves instead of their customers or clients. Seldom are the owners of the website a good representative sample of the actual users. Research shows five specific behaviors that need to be taken into consideration in website design.
• People skim
• People move in a non-linear fashion
• People are impatient and have a short attention span
• People show function-based eye movement
• People have limited cognitive resources
The fact that people skim shouldn’t come as a surprise, especially when we consider our own behavior. We skim the newspaper when looking for articles that peak our interest. The same is true when we’re reading the Internet. You can avoid this problem by staying away from long blocks of text, especially on the home page. Other good ideas include using subheadings and breaking your text into smaller chunks. When possible use bullets or numbered lists to make your point. In long paragraphs you can bold the keywords to draw attention to the important points.
When we say that people move in a non-linear fashion, we mean they don’t always land on the home page of your website. They choose to navigate your website in a manner that best suites their current needs for information. Because of this behavior, it’s critical to have easy navigation on every page. Not only does this navigation need to be easy, but it needs to be consistent throughout the website. If you skip this step you’ll find that your website visitors will often times leave without finding out what you have to offer.
While studies vary on exact numbers, most point out that people have a short attention span and are impatient when surfing the Internet. Some studies suggest that you have up to eight seconds to catch people’s attention. Other studies indicate you have as little as three. This further supports the need to use subheadings, bullets, numeric lists, and bold keywords. This is also where images and video come in. A wise man once said, “An image is worth a thousand words.” I would say that if an image is worth a thousand words, then a video is worth a thousand images. Strategic use of images and videos can greatly enhance your user’s experience and drive their behavior when surfing your website.
There have been many eye movement studies conducted over the years. Through all these studies, one conclusion seems to be predominant. When visitors arrive at your website they use function-based eye movement. Simply put, function-based eye movement means users scan the site looking for navigation and other “functional” areas of the site. This is important to note because over 95% of websites have the navigation either down the left-hand side of the site or across the top. Placing your navigation in nonstandard places could cause your visitors to leave shortly after arriving.
Website design should be partially based on the limited cognitive resources of your visitors. People can only take in and process so much information. If you want your message to be communicated, it’s important that you not overload users with complexity or nonstandard organization of your website. In other words, make things obvious. Make the website self-explanatory. Be consistent in your use of color, layout, font, and navigation. Most importantly, your design should reflect your brand and match your content.
In the end it’s all about simplicity. Your website should communicate a clear and direct message. Your navigation should be down the left or across the top. The website should be easy to use and understand. The website design should be consistent throughout. You website appearance should be attractive and attention getting without going over the top. Remember you are designing the website for your customers not for yourself.
Jeff McEachron
VP Internet Operations
Henry Russell Bruce Advertising Agency
Follow me on Twitter @jeff_mceachron
Connect with me on LinkedIn: www.linkedin.com/in/jeffmceachron
