BlogmyQuery – BMQ

With the growing number of HTML5 tutorials available to help designers and developers get a better handle on this language, it can get a bit tricky sorting through them to find what you are truly looking for. And as the capabilities of this language expand, it is important to keep up with the many ways to harness the full power of HTML5. Today, we hope to help you on that journey.

Below is a collection of handy HTML5 tutorials and resources that will teach you the basic ins and outs of the language, along with many, much more specific techniques. Take a look down through them and start boning up on HTML5!

Learn the Basics

What is HTML5? Infographic covers what it is, and why it’s useful. It also goes into where it’s supported. While not technically a tutorial, this is still a helpful resource to keep on hand.

HTML5 Tutorial.com is a great place for beginners to get their feet wet. The site is set up for those who have little to no knowledge of the language, and promises to get them ready to write and edit a site by hand.

HTML5 for Web Developers is an awesome work in progress, that is written with web developers in mind (cutting out the unnecessary vendor specific bits of the spec). Comprehensive and growing, this HTML5 specification is fantastic for beginners or those looking to refresh.

HTML5 Doctor is a site that anyone looking to sharpen their skills should know about. Their article archive alone is like an entire course on HTML5 and worth your while to take a look through.

HTML5 Pocket Book is just that. A short and sweet intro into the language. This printable fold-up pocket guide is a good cheat sheet of sorts for beginners to keep handy.

Getting Specific

Toying With the HTML5 File System API is a tutorial that explores this new element of HTML5, and the basics of this new API. Going over the most common file system tasks.

Have A Field Day With HTML5 Forms seeks to make you share the author’s love of using HTML5 to create much needed web forms. With the aid of some CSS techniques, you will have a fully styled and ready to use form in your arsenal.

Cross-Browser HTML5 Placeholder Text is a tutorial that will allow you to use HTML5 to fill any unfocused sections of your forms to have placeholder text. For browsers where this is not supported yet, there is a jQuery fallback in place.

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3 is a solid tutorial that will teach you the basics of this sort of build. While it is built using HTML5 and CSS3, it takes older browsers and their lack of support into consideration.

How To Build A Real-Time Commenting System is a nifty tutorial that will take you through using HTML5 to craft a commenting system that works with users in real-time, adding that fluidity and freshness to your site.

Design & Code a Cool iPhone App Website in HTML5 is not just for someone looking to promote an app, though that is where it is aimed. The tutorial will take the user through constructing a promotional site using HTML5 and a bit of style in CSS3.

How HTML5 Aids Mobile Financial App Development explains many of the new tags that are available in the language for building financial based applications.

HTML5 localStorage is divided into four parts and seeks to break down and fully explain the specifics of this aspect of the language. For those who do not know much about HTML5 localStorage, or those looking to know more, this is a great place to turn.

Add HTML5 video to your site will give you the tools to embed vids into your pages without having to rely on plugins or anything but your code. Again, there are fallbacks in place with this system for older browsers (flash based).

Touch The Future: Create An Elegant Website With HTML5 And CSS3 offers readers a brief overview of both languages before diving into a well structured tutorial that will have you building your own site by the end.

A Non-Responsive Approach to Building Cross-Device Webapps is a well thought out approach to serving up device specific builds, without simply using media queries to accomplish a purely aesthetic rearrangement of web elements.

HTML5 File Uploads with jQuery is a useful tutorial that uses the new HTML5 API’s to facilitate a jQuery based ‘upload center’ with drag and drop capabilities.

Create Vector Masks using the HTML5 Canvas teaches users to use the handy canvas tag in HTML5 with a bit of clipping to help shape more stylish images for your site.

Build your own HTML5 3D engine once again uses HTML5′s canvas tag, though this time with a little bit of Javascript to fashion a 3D rendering engine.

HTML5 Grayscale Image Hover offers users the means to dynamically clone colors within an image to turn it into grayscale, without an image editor. Instead, once again, HTML5′s canvas tag plays along with jQuery to make this happen.

“Mobifying” Your HTML5 Site is a tutorial that is dedicated to keeping your website mobile ready, and using HTML5 to get you there. With the focus on mobile ready these days, this tutorial might just hold the solutions you have been looking for.

Build your First Game with HTML5 calls on the power of Box2D and the ever-awesome canvas tag in HTML5 to craft a playable app.

Making a Beautiful HTML5 Portfolio uses both the Quicksand plugin, and the power of jQuery to build this stylish HTML5 based site to display your works.

All For Now

That is all on this end, folks, but that doesn’t mean the road ends here. We know there are more tutorials out there, and some thoughts that you may have on the ones we have shared. So take a moment and leave us a comment telling or directing us to the tutorials that really stand out to you.

(rb)

Just this spring, Apple revealed that more than 25 billion apps have been downloaded from its App Store. Add to that the 10 billion Android Market downloads announced at the end of 2011, and you’re looking at more than 35 billion apps downloaded cumulatively across both platforms. Clearly, consumers love their smartphones and the mobile apps they can get on them – but they can’t love all the apps.

With over a million different apps on the market, the competition is fierce. So unless you’re Facebook and pretty much guaranteed a ubiquitous presence on smartphones everywhere, you have to figure out how to make your app stand out. Having the next big idea might do it, but with the marketplace so saturated, that’s becoming increasingly difficult to do. New competitors are instead focusing on improving or redesigning existing ideas to make a better app.

One of the most effective ways of getting an app to stand out should be obvious, and yet many app developers don’t spend nearly enough time on it: creative design. What an app looks like is the first aspect people notice about it – even before they download it, and certainly before they test it out and see how it functions. That initial visual impression affects the entire user experience and will likely determine the ultimate success of an app.

If you’re doubtful, just look at Apple. Many people don’t realize that, despite now being a leader in the industry, Apple was actually not the first company to provide a mobile operating system or mobile apps. Before iOS, there were the likes of Palm OS, Symbian, Windows CE, and BlackBerry OS. And yet, like with almost everything else, Apple quickly surpassed the competition in the mobile market. In large part, this was because iOS simply looked better.

It set completely new standards for the role of creative design in the mobile app user experience arena; something that has always been one of the most basic foundations for all Apple products and services. And successful app developers have been smart to take a cue from the giant whose platform they’re building on. If you take a closer look at some of the top apps, you’ll see they tend to follow three general guidelines:

Forget Web Design

Mobile design comes with its own set of rules and expectations, so when you’re designing for mobile, don’t let the standards of web design dictate what you do. Sure, you should maintain consistency of look-and-feel across devices and stick to brand standards, but you also need to keep in mind conventions that have been established for mobile operating systems.

A great example is how Southwest adapted its website to the iPhone. The mobile app incorporates design elements from the site, but has clearly been created to provide the optimal user experience on a smartphone:

Keep it Simple

One of the biggest trends in mobile app design today is simplicity. Clean, intuitive interfaces that are easy to navigate and don’t try to be flashy. “Less is more� is not a cliché in mobile app design, but a standard.

One of the best examples of this is the incredibly successful Instagram, which combined a great idea with a simple, easy-to-use design and intuitive functionality. Many new apps are doing the same thing, regardless of industry. Two examples are the XFINITY TV and Medi-Weightloss Clinics apps below.

Make it Fun

Have you ever heard someone say they don’t like fun? For mobile apps, this means incorporating things like bright colors, cool textures, 3D effects, fun buttons, and any of a thousand other options. And no, simple and fun are not mutually exclusive as long as you don’t go overboard.

Just take a look at Yelp, Groupon, and Wunderlist – all popular apps that take advantage of interesting creative design elements while keeping the overall interface clean and simple:

As long as you keep your audience in mind, you can even forgo a bit of simplicity to make an app more exciting. Like when it comes to a drinking app. Take Brewski Me for example: every single design element – from background texture, to fonts, to buttons – took into account the preferences and interests of the target audience. It’s fun and flashy, but without compromising the simplicity or intuitiveness of the interface. There’s a reason it won the 2011 Best Beer App award.

For people outside of the app design process, User Experience (UX), a.k.a., how the app controls in the user’s hands, can seem a little nebulous. What exactly does it entail? Where does UX end and UI (user interface) begin? Do they ever cross over?

While they are two different disciplines, they are absolutely intertwined. UX defines the userflow and functionality of the product, while the UI is all about what visuals you see while using the app.

Some additional apps that do a great job of giving users an intuitive UX coupled with a stunning UI are:

Clear

UX Highlights: Simple list of to-dos, gesture-based clearing of items, pull-down to add a new feature, pull-up to clear a finished list, and pinch to move through menu hierarchy.

UI Highlights: Bold, gorgeous colors. Beautiful chiming animations make you feel accomplished and keep you smiling. Vibrations upon choices give that little extra punch that you’ve completed something monumental. The usage of color coding to indicate priority is coupled with the work-as-you-expect it movement of items. Add in the different theme options, which grow as you install different applications on your device, and Clear is the end-all, be-all of to-do lists.

Path

UX Highlights: The springy menu at the bottom left, housing all of your action items, takes the place of the typical TabBar seen in most applications. Also the left-side slide-out navigation, which houses details about your user account is reminiscent of Facebook, but that’s okay because we think perhaps Facebook’s Timeline feature may have borrowed a thing or two from Path’s.

UI Highlights: Aside from the gorgeous graphics, all of the animations, interactions, textures, structure of information, loading bars and even the typing experience makes it easy to use. The parallax scrolling on the Timeline is particular mesmerizing.

Miso

UX Highlights: With a TabBar at the top, Miso sets itself apart, but keeps important information always in a users view. The simple grid view for popular shows lets you find data quickly, and interior pages are laid out in an easy to understand fashion. The Check-In & Rate screens are some of the most straight-forward, intuitive around.

UI Highlights: Using a dark interface, perfect for not bugging other viewers around you, coupled with tiny little animation touches, Miso makes for a great viewing experience. Pull to Refresh unleashes a rainbow of fun!

Tweetbot

UX Highlights: The account view pop-over allows for super-quick switching between accounts, great for experienced Twitter users. A slide-down sub-menu for each tweet makes replying or retweeting a pleasure. The custom icon bar at the bottom of a new tweet makes adding tags, photos even easier. By far the best Twitter application available.

UI Highlights: Everything? From the subtle textures used on the buttons and navigation bars, to the plethora of indicator sounds that let you know what the app is doing, Tweetbot is the sort of application you love to use – just because it’s so much fun.

Nevus

UX Highlights: The most important features of a skin care app – what the UV Index is and when you need to reapply sunscreen, are given center stage. The Skin Record feature is intuitive, fun, with a straight-foward “compare to a pennyâ€� feature to track size. Password protecting skin records is a nice added feature.

UI Highlights: Simple, clean colors work well in the sunlight and communicate effectively. The design of the Skin Record chart is particularly straightforward, while attractive.

Yahoo! TimeTraveler

UX Highlights: The card-style destination city chooser is simple and effective. The spinning “duration� picker is a lot of fun to play with. Top navigation floats above content but is always available for users to utilize.

UI Highlights: Animations on the aforementioned card-style destination city choose is flawless. Beautiful colors and buttons lets the app feel like Yahoo!, but very distinct as well. Informational rows are clean, while giving you plenty of room between each stop to facilitate reading.

Just Landed

UX Highlights: Quick interface lets you enter the flight number, then tells you how when you should leave to pick up your passengers on time. All of this without any muss, or fuss. Just to the point.

UI Highlights: Clean and stunning interface. From clever little animations of turbines spinning to the distinctive time meter indicating how long until you should leave to the beautiful illustrations beneath each airport, this app makes you want to always volunteer to pick up friends when they arrive!

Day One

UX Highlights: Simple interface shows you what you’ve done and gives you access to everything. Concise list views and a simple writing interface.

UI Highlights: The epitome of clean. Nothing superfluous, only solid colors and subtle suggestions. The sounds make this app a stunner.

Readability

UX Highlights: Big, bold rows, with menu items hidden at the top so they don’t get in the way of reading. Controls for changing text-size are unique and intuitive. Layout of reading page is uncluttered and pristine.

UI Highlights: A classic style, with subtle textures and slight values of brown keep this app warm and inviting. From the subtle fade on the font-slider to the choice Hoefler & Frere-Jones fonts throughout, this app is the best way to read content on a consistent basis.

Dropbox

UX Highlights: Human Interface Guideline is friendly all the way. They keep it simple and it works.

UI Highlights: Custom illustrators for each of the sections before you’ve added anything into the mix. Clean use of icons and the strength to remain reserved when other uploading applications go overboard with visuals.

TuneIn

UX Highlights: Easy to understand icons and straight forward usage of the list view. Layout of the radio station page is great, with many features right at your fingertips.

UI Highlights: Use of warm colors coupled with dark backgrounds and navigation draws the eye directly where it needs to go.

Flipboard

UX Highlights: From the now-classic grid-interface for news consumption, to the pull-down menubar, Flipboard gives you a high-level view of news & information. The “flip-up� paradigm with the interface is useful and entertaining. Keeping text in navigation elements to a minimum means you pay attention to the content instead.

UI Highlights: The moving images when you launch the application coupled with the clean, narrow fonts lets you know this app means business. Inside, the off-white background is easy on the eyes, while the usage of bold, vibrant photographs engage readers. Beautiful tutorial overlays add wonderful polish.

OkCupid

UX Highlights: The slide-up drawer TabBar is a fantastic way to handle multiple options. Large, easy to follow rows and layout make browsing simple. Photo gallery is intuitive and quick.

UI Highlights: Great loading animations, calming, comforting colors (nice to have in a dating app), with a clean, distinctive interface.

Stamped

UX Highlights: The color gradient picker for choosing your stamp color stands out as particularly amazing. The large new stamp button in the TabBar is to-the-point, and the simple icon-based filter works flawlessly with its pop-over tool tip.

UI Highlights: Subtle shades of white and gray, with splashes of color where they are needed. The large, narrow font helps Stamped stand out from most other check-in apps. Great animations and tons of style.

The Fancy

UX Highlights: A simple, elegant design that puts an emphasis on ease of navigation. Tapping the menu button in the upper left-hand corner of the screen will bring up a list of options. The browse button splits all ‘Fancied’ items into categories.

UI Highlights: Pleasant light blue and white theme. A selection of products can be purchased directly through the app’s effortless process.

To Conclude

The key with creative design is not to go overboard. The size of mobile screens ensures that every element counts, no matter how tiny. To make an app successful, each one of those elements has to be both beautiful and useful. What are your thoughts on the mobile app user experience? What are some of your favorite mobile apps that fit these criteria?

(rb)

Professionally designed and neatly coded templates always make life easier for developers, not only because they save time, but also for the effort they save. Since web development is an ever expanding field, it is important for developers to keep their work up to date with the latest changes. HTML5 and CSS3 templates are there to make your websites future proof and make them even more accessible.

In this round up, we are presenting a brilliant collection of some fresh and free HTML5 and CSS3 templates that you can download today. With these templates, you can also learn how to code your websites in HTML5 and CSS3. So, enjoy looking into this collection we have compiled for you.

The Templates

Template for Powerful Business Startup ( Demo | Download )
The visually pleasing layout is the first thing that catches the attention when you look at this theme, but it’s certainly not the last. Along with cool graphic elements and hand-written typography, this free website template will provide you with the functionality you need for a good start for your online business.

Animated Neoarts ( Demo | Download )
This is a modern and elegantly designed web template suitable for Design/Studio websites. All-in-One page with an animated theme.

Vintage – HTML Template ( Demo | Download )
This is a responsive blog template that comes with a retro touch. You can use this template for a stylish portfolio.

Template for Restaurant Business ( Demo | Download )
This free website template features an attractive and functional design, which is important for attracting visitors’ attention and making the time they spend at your site pleasant. Geared towards a restaurant, this high-grade theme comes with a stylish layout in an elegant color scheme, with a jQuery slider, and a nice gallery for the images you have.

Simpler ( Demo | Download )
As the name indicates, the template is relatively simpler than the other templates presented in this collection. It has a fixed layout which is made in HTML5.

Free Template for Spa Salon with Zoomer Effect ( Demo | Download )
If your business deals with offering a wide variety of beauty services, try this nicely done ready-made template for starting up your project. The pleasant color scheme turns out to be a good background for the wonderful images from your collection. The neatly arranged content blocks in the main part of the theme are intended to present all the necessary information in an effective way.

CSS3 Design One ( Demo | Download )
CSS3 Design One is a simple two column fixed width template, with a jQuery drop-down menu, jQuery image fader and working PHP contact form. It utilizes @font-face, and CSS3 rounded corners / text shadow.

Zen ( Demo | Download )
This free website template is best suited for the personal blog pages. The template has been designed by using HTML5 and looks visually appealing.

Template for Web Design Studio ( Demo | Download )
Though this theme can be used for many other purposes, it was primarily designed for web design studios. It is a user friendly and visually appealing web template.

Caja ( Demo | Download )
This creatively designed web template is ideal for those who want to make certain files available for download on their websites as well as want to showcase their work.

Scenic Photo Two ( Demo | Download )
Scenic Photo Two is a simple two column fixed width template, with a jQuery drop-down menu and scenic photographic background image. With a working PHP contact form, it utilizes lots of CSS3 features.

Watercolor ( Demo | Download )
This template comes with a fixed layout however you can choose from 4 different skins that are available. It is a friendly XHTML/CSS template.

Responsive Brownie ( Demo | Download )
A brilliant responsive HTML5 template aimed at businesses and portfolios.

Simple ( Demo | Download )
Simple is a neat and clean web template that offers more 7 page layouts, jQuery functionality, 2 Cufon fonts to choose from, loads of background patterns, as well as one sprite file image.

Immaculate 2 ( Demo | Download )
This free HTML5 website template is suitable for blogs and personal websites.

Folder ( Demo | Download )
This is a responsive HTML5 template that can be used with any device and browser size without any problem. This is an ideal template for creative showcases and businesses.

PhotoArtWork2 ( Demo | Download )
PhotoArtWork2 comes with 3 different image galleries, a jQuery drop down menu, as well as a functional PHP contact form. This template is suited for photography related and portfolios websites.

Left ( Demo | Download )
This web template is designed in HTML5 and offers more than 6 page layouts with a unique skin system that can create a new skin appearance within minutes.

PhotoArtWork2_reverse ( Demo | Download )
This is another version of PhotoArtWork2 that is a complete web template with easy to customize options.

Muro ( Demo | Download )
This is another brilliantly designed web template that comes with 3 different skins, 7 page layouts as well as jQuery functionality.

Torn ( Demo | Download )
Torn is an XHTML web template that offers 5 pre-defined skins and 7 page layouts along with jQuery functionality.

Template for Horse Club ( Demo | Download )
Horse Club is one of the free website templates created by the Template Monster team.

CSS3 Seascape Two ( Demo | Download )
This template offers a 2 column fixed width template with a jQuery drop down menu, image transitions and PHP contact form.

Photo Style Two ( Demo | Download )
Photo Style Two web template also offers a jQuery drop down menu, image fader and PHP contact form.

Template for Business Project ( Demo | Download )
If you want your website to look as efficient and professional as possible then you should opt for this free web template. It focuses on the main points of your business and highlight them to grab the attention of the visitors.

Connoisseur ( Demo | Download )
With this web template, you can easily set your website apart from your competitors. This free website template is suitable for all those websites that pertain to fine arts, cuisine, dining, etc.

More on Page Two

Many more templates await, over on page two. So head on over and check them out!

We love to tell users that they have done something wrong. We have error messages for everything from poorly formatted telephone numbers to incorrect logins. But what about our user’s successes, do we celebrate them? Do we tell them they are doing something right?

It is as important to tell users that they are doing things right, as it is to inform them when they make a mistake. This kind of positive reinforcement is key to a pleasurable user experience. In this post, I want to explain why positive feedback matters, suggest when it is appropriate and how to integrate it into your website.

We begin by asking why positive reinforcement matters.

Why Positive Reinforcement Matters

Have you ever considered why a majority of us may dislike virtual keyboards? One of the primary reasons is that a virtual keyboard cannot provide the same level of feedback as a physical one.

Virtual keyboard manufacturers have worked hard to provide positive reinforcement using sound and the pop-up keys (such as the ones found on the iPad). However, these do not match the positive feedback one gets from using a physical keyboard. The sounds are annoyingly artificial and virtual keyboards are unable to replicate the tactile feedback of using a physical key.

We tend to dislike virtual keyboards because they cannot provide the same level of feedback as a physical one.

The example of a virtual keyboard illustrates how important it is to provide positive reinforcement for users of our websites. As with virtual keyboards, the lack of positive feedback leaves the user with a less pleasurable experience.

Many users lack confidence (either in their own abilities, or in the reliability of your website). They worry about whether they had done something wrong or whether the website has understood what it was that they wanted to achieve. In many cases this is because they don’t really understand how websites and computers work. The result is that they blame themselves when something goes wrong, presuming that their ignorance has led them to make a mistake.

By providing positive reinforcement we reduce these worries and give the user confidence that everything is going smoothly. This is particularly important for users who lack confidence in their own abilities (for example, the elderly). These users are often perfectly competent. However, because they lack confidence they second guess their decisions, which significantly undermines their experience.

Positive reinforcement does not just give the user confidence that they are doing something right, it also eliminates doubt about whether something has gone wrong. This can prevent a user from undoing something that they have done correctly.

A good example of this is an e-commerce transaction. Have you ever submitted an order to an e-commerce website and been left wondering whether the transaction is being processed because the page was taking longer to load than you expected?

A simple piece of positive reinforcement (such as an update telling the user that the order is still being processed) would resolve this problem, and prevents people from hitting the back button.

By keeping the user up-to-date you reduce their anxiety that something has gone wrong.

All of this doubt and confusion significantly slows the user down. They find themselves re-entering data, re-submitting forms and constantly using the back button. A small amount of positive reinforcement will significantly increase the speed with which they complete tasks.

With the benefits of positive feedback clear, when should we use it? When does the user need encouragement that they aren’t making mistakes and that the website is doing what they expect?

When Positive Reinforcement Is Required

The most obvious place to provide positive reinforcement is when a user is entering data. Whether registering, logging in, making a purchase, posting a comment, updating a status, or interacting with a Web application, data entry accounts for a large proportion of our interactions online.

It also represents the greatest likelihood of error, and users know this. As a result they often lack confidence in their data entry skills, and need some reassurance. This is especially true when entering data such as email addresses, passwords and postal codes.

Graze speeds up the process of completing their signup form by showing a tick when you complete a field correctly.

Data entry is not the only (or even most common) form of user interaction—users interact with your website every time they click on a link. It surprises me how many websites fail to show the user that they have successfully clicked on a link, yet instead, rely on the browser to provide feedback.

Smashing Magazine leaves the user with no doubt that a link has been successfully clicked (screenshot of Monthly Desktop Wallpapers).

Relying on the browser to provide positive feedback can be problematic as the user may miss it. This is because the browser shows that it is loading a page using the address bar, while the user’s attention is on the link that they have just clicked. This can lead to the user clicking on the same link again.

If the user is looking at a link, they may miss updates in the address bar.

The problem of feedback and attention being in two different places extends beyond links. There are many situations when a user’s interaction results in something changing elsewhere on the page. These kinds of changes are easily missed and some more obvious feedback is often required.

A common example of this would be adding an item to a shopping basket. Because the user’s focus is on the item they are adding, it can be easy for them to miss the basket updating. In such situations it is necessary to update the item itself to show it has been added.

When an item is being added into the basket on the Wiltshire Farm Foods’ website, the appearance of the product changes significantly.

Not that this is just an issue of distance between focus and the change on the page, it is also one of subtly. For example, a basket updating could be as subtle as a number incrementing from one item to two. This is easy to miss, even if the user’s attention is in the right place.

When a user’s interaction triggers a subtle page update, it is often necessary to provide some stronger feedback to reassure the user that their action has had the desired result.

How you provide that positive reinforcement will vary from website to website. There are a number of different approaches you may wish to consider…

Ways To Implement Positive Reinforcement

When a user makes a mistake, we normally inform them by displaying a textual error message. It is therefore unsurprising, that when we think of providing positive feedback, we also turn to textual messaging.

However, I believe we should be careful when providing positive feedback in a textual form. The problem with this approach is that text forces the user to shift their attention and read the message. This slows down the completion of their task rather than encouraging them to move forward.

That said, there are occasions when text can be effective for providing positive reinforcement. For example, if the user has just clicked an “add to basket” button, it may be appropriate to re-label the button to read “add another”. By changing the text you make it clear that one item has already been added, and encourages the user to move on to the next task. The other benefit to this approach is that the user is seeing a change where they are currently looking (the button that they have just clicked) rather than elsewhere on the screen (such as the basket, which they might miss).

Changing the labelling on an add to basket button can bring clarity to a user’s interaction.

Visual Feedback

If we are going to limit the use of text as a method of positive feedback, a better alternative is to use design signals. These could include changes in imagery, styling, color, or size.

Examples may include altering the color of a link when clicked, adding a tick after a field that has been correctly completed, or highlighting an updated portion of the page.

An important example of this kind of positive design feedback would be the cursor state. Users have come to expect the cursor to change into a hand when they rollover an interactive element (such as a link or a button). When it fails to do so, the absence of this positive feedback causes confusion. Yet, despite this well known behavior, too many interactive elements on websites do not demonstrate this behavior.

Without this cursor state, a user may be unsure whether they can click this box.

Feedback Using Animation

Another visual way to provide positive feedback is through animation. There are some great examples of how subtle animation can draw a user’s attention to an error (like the slight vibration you see if you enter the wrong log-in details for WordPress). These same principles can be applied to positive feedback, as well.

A common example of using animation to provide positive feedback would be when users click on an anchor link. By default this jumps the user down the page which can be a very disconcerting experience. However, a smooth scrolling animation combined with a highlighting of the destination can make it clear that what the user had expected has actually happened.

Animation can also be used on e-commerce websites to indicate an item has been added to a basket. Whether it is the basket expanding (to show the new item) or the product physically ‘flying’ towards the basket, these animations reassure the user that their intended action has been completed.

Animation can be a useful tool to show that an action has been completed.

I believe animation is an under-utilized way of providing positive feedback and is something we should be exploring further on our websites. However, it is not the only method that is under-utilized—there is also the use of audio.

Audio Feedback

Do you wait for that “whoosh” noise when you send an email? That is an audible signal that the email has sent successfully. What about those little pings, beeps and twerps that notify you that something has happened on your computer or mobile device? Whether we realize it or not, most of us are reliant on this kind of audio feedback that reassures us that an action has happened.

When sending an email we are very reliant on the audible feedback to ensure us that it has been sent.

Why then do we shy away from using audio on our websites? Audio is an excellent tool for providing positive feedback and yet few websites use it.

Maybe our reluctance is because audio can be annoying. The history of the Web is littered with examples of annoying audio loops or background music that you cannot mute. However, you could equally argue that the Web is littered with bad design and animation (but still, that doesn’t stop us from using these tools).

Others may argue that audio is not appropriate in a work environment. Although I would generally agree, the audio we are talking about using here is no different to the audio notifications used by a plethora of desktop applications that are common in an office environment.

An audible click is a great way to tell a user they have clicked on a link. A “cha-ching” would be the perfect way of letting a customer know they have added something to a shopping cart. Audio is a powerful tool that we are currently under-utilizing.

Much To Learn And Discuss

Whether you use audio, design, animation, or text, we should be providing users with more positive feedback for their actions. It gives a user confidence that in turn increases the speed in which they move through your website (and their level of satisfaction). We have still have much to learn about how to provide positive feedback for users, and we would be especially interested to hear your thoughts in the comments below.

• Is audio a good tool for feedback?
• What examples of positive feedback have inspired you?
• Do you perceive dangers in providing too much feedback to users?

Let us know your thoughts!

(jvb) (il)

Image used on front page is owned by opensourceway.

© Paul Boag for Smashing Magazine, 2012.

Today’s post features a huge variety of high quality, high-resolution free professional textures. These texture packs range from wood, concrete and bokeh designs, to grunge, old film and rain drops. Whatever your project is, there is sure to be a suitable texture for you in this mega collection!

Whilst many free textures can be of a poor standard, all of today’s texture packs have been carefully hand selected because of their sharpness, clarity and great quality. Enjoy!

The Textures

Free High Resolution Textures – 14 Free Vintage Film Textures
This great set of textures features some super grungy photos of old film. These images come with rips, scratches and lots of other great textures for an authentic aged look.

Free High Resolution Fabric Texture Pack 2
A great free texture pack that is as diverse as it is vibrant. This collection of bright and bold fabrics is perfect for a home-made design.

Free Textures: Grab Bag 18
This varied assortment of free high-res textures features rust, rock and wooden textures. Each texture has a very natural feel to it, with plenty of details that result from nature. (free for personal usage, $9.99 for commercial use)

Free Textures: Orange
This texture set includes a series of images that allow an orange undercoat to show through when the overcoat begins to wear and crack. A really unique set of textures that should provide a lot of visual intrigue. (Note: requires email input to download)

Stained Concrete Texture Pack
A great texture set featuring 6 stained concrete images. These textures have a grungy style to them and are perfect for integrating into your backgrounds.

Nine in the Afternoon: Icon Textures Set
A really unique, dark and surreal texture set. This texture set contains 50 spooky icons with twisting shadows, cobwebs and dew drops. Unfortunately the icons are only 100X100px, but they are still perfect for avatar designs and other smaller compositions.

Wood Texture Pack
This high res texture pack contains 12 awesome textures, with a variety of wood types. The textures range from more man-made sections of wood, to very natural, rough bark textures.

Crumpled Paper Textures
A wonderful set of paper textures, that are made all the more interesting by their crumpled appearance. It’s great to see a variety of paper types, from plain, to lines, sketch-filled and yellow.

10 Free Hi-Res Light Grunge Textures
Usually grunge textures are very intense, dark and overbearing. It’s great to see Fudge Graphics offering this set of lighter grunge textures. They have a very plain, minimal feel and would work perfectly as an overlay to your existing designs.

High Res Colurfull Textures
These textures are really unique and have a bright, collaged feel to them. Highly creative and detailed they are perfect for your more hand-drawn, mixed-media style works. (Note: Requires email input to access.)

5 Beach Stone Textures
This wonderful texture set offers 5 super sharp stone textures, perfect for your more grungy, rustic designs. (free for personal usage, $9.99 for commercial use)

18 Hand stained & Colored Paper Textures
These stained paper textures are great for adding a creative backdrop to your graphics, providing a natural looking, messy background design.

33 Free Rust Textures
This set of rust textures is huge, and every texture is incredibly detailed. These images are perfect for a grungy design, and range from minimal, to extensive rust damage.

Grunge Plywood Textures
A great set of textures, these plywood images are as varied as they are detailed. The wooden surfaces are richly colored, to provide diversity and uniqueness for your designs.

Distressed Wood Texture Pack 1
This pack contains a wide variety of textures, ranging from tree cross sections to roughed up bark and wooden planks.

12 Free High Resolution Denim Textures
One of my favorite texture packs in this entire collection! These denim textures really expose the beauty of this fabric, and the pack comes with designs from the very simple to elaborate seams and detailing.

Grunge Concrete Textures
This awesome pack of concrete textures is usually premium, part of the Vandelay premier members area. However, Web Designer Depot have offered it for free (email address required for access).

94 Free Colorful Bokeh Textures
The mega texture pack contains nearly 100 free bokeh textures. These beautiful textures are very soft, and perfect for an attractive background graphic.

5 Rainy Window Textures
Need some textures for a gloomy day? These unique rainy window textures are great for adding water droplets as an overlay for your designs. (free for personal usage, $9.99 for commercial use)

Intense Dark Grunge Textures
This texture set is incredibly dark and moody, offering a range of heavily shadowed, rocky textures.

Old White Cracked Textures
This texture set is really unique, and has the appearance of something like bark. These cracked white surfaces seem perfect for a winter themed design, or for adding some extra detail to a design if used as an overlay.

Risk Textures
A really varied set of textures, with many giving the appearance of an alien surface, or something reminiscent of a nuclear warfare zone. Quirky and different, and perfect for adding a unique touch to your designs.

10 Digital Noise Textures
These textures are quite minimal, yet very detailed in that they contain lots of subtle scratches and marks. They are perfect for overlaying over your regular designs to add depth and detail.

9 Free High Resolution Metal Surface Textures
These metal textures aren’t just your standard metallic surface textures, instead including shots of cheese graters, industrial surfaces and metal bars.

25 High Res Storm Cloud Textures
Working on a design that needs a moody, stormy background? These storm cloud textures are perfect for bringing that atmospheric backdrop to your work.

25 Apocalyptic High Resolution Rust Textures
Apocalyptic is certainly the right word! These surface textures look like the result of a nuclear meltdown. Perfect for adding a rough, destructive feel to your designs!

20 High-Res Subtle Grunge Painting Textures
These textures are very subtle, with a faint grunge design being barely visible on some of them. They’re perfect if you’re looking to add a grungy element to your work that isn’t too obvious or overwhelming.

High resolution old paper textures
This great texture set draws images from a series of old envelopes and brown paper. It provides a welcome change from the regular white paper textures that are so readily available.

11 Free High Resolution Fabric Textures
A great selection of fabric textures ranging from knitting fabrics, to carpets and rugs. All of the textures are super high res and sharp/clean.

5 Antique Postcards
These textures have a really old time, authentic feel to them that simply can’t be captured through regular graphics. Integrating these images into your designs will really help to give it that antique appearance. (free for personal usage, $9.99 for commercial use)

High-Res Mixed Texture Pack
A lovely texture pack with a mixture of different designs. The textures range from dirty grungy to clean stones, tinted rocks and brick formations. Each texture has a vintage ‘instagram’ style to it, and is extremely high resolution.

Rough Cement Texture Pack
A nice variety of cement textures these textures range from cracked to smooth, speckled and destroyed. All of these textures have a very urban, manmade feel to them.

Wallpaper Textures (27 Images)
This great texture pack contains a series of wallpaper designs. These would be perfect for an interior designer’s mockups, or if you want to achieve a homely feel in your designs.

Green Leaves Texture Pack
This green leaves texture pack contains some very natural, verdant textures. These images are perfect for any nature themed designs and include a variety of leaf types sure to fit your needs.

Totally Rusty Metal Textures
Some of the best rust textures on the web! These textures are not only extremely high res, but superbly detailed and richly colored.

10 Free High Resolution Wood Textures
A wonderful range of clean wooden images. These textures don’t include more natural bark/tree types of wood, but include plenty of flooring and polished surfaces. Perfect for a cleaner, more elegant design!

30 High Res Foam Dot Textures
One of the most unique texture sets out there, the collection of foam ball close ups works really well to provide a unique, detailed background for your work.

10 Free High Resolution Grungy Surface Textures
This is a hugely detailed texture set featuring a variety of grungy surfaces, including old doors, metal grates, and wooden paneling.

5 Abstract Blue Textures
This texture set includes 5 high res textures featuring icy blue surfaces. These images have wonderful lighting and should provide plenty of depth for your designs. (free for personal usage, $9.99 for commercial use)

18 Essential Grunge Textures
These grunge textures from Lost and Taken are ideal for using as an overlay in your graphic design work, adding an extra level of detail and depth to it!

Favorite Textures?

We hope that you enjoyed this collection and bookmark it for future reference. We would love to know if you had a favorite set of textures. Let us know in the comments below and we can get a discussion going!

(rb)