Awesome Slider demo and source codes

Just two days ago I published a tutorial on building a custom slider with jQuery using XML to store data. You've asked it, and today I am publishing a demo of the slider and also releasing the source code.

Demo & source codes

• Awesome slider demo
• Awesome slider source code

You can check out live versions of this slider on Evenimente by Niki website's homepage and soon on the new version of our web agency's website.

If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Further reading

• 1. The change is here. Hover events come to mobile devices
• 2. Should I use on hover behavior?
• 3. Javascript DOs and DONTs. Complete with 17 examples from real web
• 4. Consistency. Key element in extraordinary UX
• 5. Buttons and usability

Make your own jQuery slider using XML

Just a few days ago I had to build a slideshow on a website I developed. However, I couldn't find a proper slider that would work exactly as I wanted it to. The end result was that I coded a custom slider, and I am sharing the process with you. By the end of this article you'll be able to create a jQuery powered slider that uses XML to store information.

Why XML

I used XML because not all slides needed for the website contained vital information. Only the first slide contained critical information. I used XML because it allowed me to keep a clear and short source code that search engines would definitely like.

Progressive enhancement?

If javascript were turned off then the slider wouldn't work and it wouldn't load any content from the XML. The slider's canvas would be left blank. To fix this issue the first slide of the presentation is also included inside the html source of the site and is replaced via javascript, if available.

Slider description

I needed the slideshow to be dynamic — support variable number of slides. I also wanted the slider to have numeric controls and no thumbnails or any other gizmos. I also wanted to have all sorts of html tags inside the slides, not just images or movies. I also needed the slider to move forward on a given interval. And all these features were implemented, and you will be able to do the same by the end of this article.

HTML structure of the slider

1
2
3
4
5
6

<div class="splash">
	<div class="splash-content">
		This will hold the content in place, be it one image or a lot of HTML
	</div>
	<div class="splash-controls">&nbsp;</div>
</div>

The main .splash div will hold both content and slider's controls in place. The .splash-content div will wrap the actual content of the slider. The reason I used class attributes instead of id attributes is because I wanted to be able to insert multiple sliders inside the same page. But if I have multiple sliders, I need to make sure that each of them has unique content and that controls do not interfere from one to another. To do that, I added unique IDs to the outer splash div.

1
2
3
4
5
6

<div class="splash" id="unique_id_here">
	<div class="splash-content">
		This will hold the content in place, be it one image or a lot of HTML
	</div>
	<div class="splash-controls">&nbsp;</div>
</div>

Basic styling

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.splash-controls
{ 
display:block; 
height:2em; 
margin:0 auto; 
margin-top:1em; 
}
.splash-controls a
{ display:block; 
width:2em; 
height:2em; 
color:green; 
background:rgb(51,51,51); /* Internet Explorer fallback color */      
background:rgba(51,51,51,0.1);
text-align:center; 
line-height:2em; 
float:left; 
margin-right:0.5em; 
text-decoration:none; 
border-radius:1em;
-moz-border-radius:1em;
-webkit-border-radius: 1em;
}
.splash-controls a.selected	
{ 
color:#FFF;
}

The reason why I didn't provide any styling to the outer div or the content wrapper is because I want it to take the shape, size and styling of the content loaded from the XML. If there's some HTML, applying some style here may get crippled because of the content loaded. With the above CSS rules, the controls will show up as circles in modern browsers. If you want this feature in all browsers, perhaps you should use some background images instead of rounded corners and RGBA.

XML structure

<?xml version="1.0" encoding="utf-8"?>
<slideshow>

<slide>
	<content>
		<![CDATA[
	images, youtube videos, plain html, anything you like
		]]>
	</content>
</slide>
<slide>
	<content>
		<![CDATA[
	images, youtube videos, plain html, anything you like
		]]>
	</content>
</slide>

</slideshow>

The CDATA inside the content tag is there because otherwise HTML wouldn't be requested correctly by the javascript we are about to indulge with. With that said, let's move on to some jQuery.

Adding jQuery functionality

A neat way to have multiple sliders on the same page and throughout the site would be to use a plugin or a function that can handle the task. I chose the later and constructed a function that takes as arguments the ID of the slider and the XML filepath. The ID is nothing else but the id attribute we assign to each slider.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

function AwesomeSlider(selector,xml)
{
 
	// slider
	var items = 0;
	var content = new Array(10);
	var control = '';
	var count = 1;
 
	$.get(xml, function(data)
	{ // get contents from xml
 
		$(data).find('slide').each(function()
		{
			// populate array
			items++;
			var $slide = $(this); 
			content[items] = $slide.find('content').text();
			// create controls
			if(items==1) control = control + '<a href="#" class="selected" rel="'+items+'">'+items+'</a>';
			else control = control + '<a href="#" rel="'+items+'">'+items+'</a>';
		});
 
		$(selector+' .splash-content').html(content[count]);
 
		// add controls
 
		$(selector+' .splash-controls').html(control);
	});
 
	// control is clicked
	$(selector+' .splash-controls a').live('click',function (){
		var slideID = $(this).attr('rel');
		count = Slide2Next(selector,count,content,items,slideID);
		return false;
	});
}

items variable will hold the total number of slides our slider contains. The content array, initialized to a size of 10 objects will contain the content of each slide. We only read the XML once, not every time someone clicks a control to move to next slide or when the timer says so. control variable is in fact a string containing HTML source being built to hold the slider controls. The count variable will hold current slide's number.

By using the $.get request we get all the contents of the XML file, then loop through each slide to get it's content and construct the slider's controls. The if on line 20 checks if we're currently on the first slide, and if so adds a selected class to the current anchor tag — for styling purposes.

Once we've looped through all slides and gotten their content, we set the content from the first slide into the HTML (line 24) and insert the controls into the HTML as well (line 28). As controls are added inside the DOM after page is loaded, simply binding them with jQuery's .click() event handler will not work. Instead we use the .live() handler.

Once someone clicks a control, we need to get the ID of the slide they wish to move to. That ID is stored in the control anchor's rel attribute. Once we have the ID, we then move to next slide (line 34) and prevent default behavior for links by using the return false; on line 35.

Strangely, the function we just tried to call doesn't exist (the one on line 34), so we create it. The updated source looks like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

function AwesomeSlider(selector,xml)
{
 
	function Slide2Next(selector,count,content,items,slideID)
	{	
		if(slideID>0) count = slideID;
		else if(count<items) count++;
		else count = 1; // reached the last slide, get back to first
 
		$(selector+' .splash-content').animate({opacity:0},1000, function(){
			// faded out, changing content
			$(selector+ ' .splash-content').html(content[count]);
 
			// animating
			$(selector+' .splash-content').animate({height:'toggle'},1000, function(){
				// change style of controls
				$(selector+' .splash-controls a.selected').removeAttr("class");
				$(selector+' .splash-controls a[rel='+count+']').attr("class","selected");
				// fading back in
				$(selector+' .splash-content').animate({height: 'toggle'}, 1000, function(){
					$(selector+' .splash-content').animate({opacity:1},1000);
				});
			});
		});
                return count;
	}
 
	// slider
	var items = 0;
	var content = new Array(10);
	var control = '';
	var count = 1;
 
	$.get(xml, function(data)
	{ // get contents from xml
 
		$(data).find('slide').each(function()
		{
			// populate array
			items++;
			var $slide = $(this); 
			content[items] = $slide.find('content').text();
			// create controls
			if(items==1) control = control + '<a href="#" class="selected" rel="'+items+'">'+items+'</a>';
			else control = control + '<a href="#" rel="'+items+'">'+items+'</a>';
		});
 
		$(selector+' .splash-content').html(content[count]);
 
		// add controls
 
		$(selector+' .splash-controls').html(control);
	});
 
	// control is clicked
	$(selector+' .splash-controls a').live('click',function (){
		var slideID = $(this).attr('rel');
		count = Slide2Next(selector,count,content,items,slideID);
		return false;
	});
}

The Slide2Next function also works if the slideID is not provided, or null. We need this for the upcoming feature — moving to next slide after a set delay. The if statement on the 6th line checks if slideID is provided. If provided, count variable will now hold the ID of the slide the user wants to move to. If not, the count variable will be incremented by one, if not on the last slide. If slider's on the last slide, count variable will be reset to 1 — the first slide.

We then fade out current slide (line 10), we then set new content according to required slide ID (line 12), then toggle the height of the content div inside the HTML (line 15). We change the state of controls on lines 17 and 18 and on lines 20 and 21 we toggle the height back and then fade in the content.

But I still didn't add the timer to the slider which is actually quite easy. We add three new lines at the end of the main function inside the .click() event handler and just after it. The final source looks like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

function AwesomeSlider(selector,xml)
{
 
	function Slide2Next(selector,count,content,items,slideID)
	{	
		if(slideID>0) count = slideID;
		else if(count<items) count++;
		else count = 1; // reached the last slide, get back to first
 
		$(selector+' .splash-content').animate({opacity:0},1000, function(){
			// faded out, changing content
			$(selector+ ' .splash-content').html(content[count]);
 
			// animating
			$(selector+' .splash-content').animate({height:'toggle'},1000, function(){
				// change style of controls
				$(selector+' .splash-controls a.selected').removeAttr("class");
				$(selector+' .splash-controls a[rel='+count+']').attr("class","selected");
				// fading back in
				$(selector+' .splash-content').animate({height: 'toggle'}, 1000, function(){
					$(selector+' .splash-content').animate({opacity:1},1000);
				});
			});
		});
                return count;
	}
 
	// slider
	var items = 0;
	var content = new Array(10);
	var control = '';
	var count = 1;
 
	$.get(xml, function(data)
	{ // get contents from xml
 
		$(data).find('slide').each(function()
		{
			// populate array
			items++;
			var $slide = $(this); 
			content[items] = $slide.find('content').text();
			// create controls
			if(items==1) control = control + '<a href="#" class="selected" rel="'+items+'">'+items+'</a>';
			else control = control + '<a href="#" rel="'+items+'">'+items+'</a>';
		});
 
		$(selector+' .splash-content').html(content[count]);
 
		// add controls
 
		$(selector+' .splash-controls').html(control);
	});
 
	// control is clicked
	$(selector+' .splash-controls a').live('click',function (){
		var slideID = $(this).attr('rel');
		count = Slide2Next(selector,count,content,items,slideID);
		clearInterval(slideInterval);
		slideInterval = setInterval(function(){ count = Slide2Next(selector,count,content)}, 10000 );
		return false;
	});
 
 	var slideInterval = setInterval(function(){ count = Slide2Next(selector,count,content)}, 10000 );
}

On line 63 we set the Slide2Next function be called every 10 seconds. On line 58 and 59, we reset the interval back to 10 seconds after the user has clicked a control. We don't want bad functionality such as the following: User comes to site; user clicks a slider control after 9 seconds; new slide is loaded then faded out because due to the timer that calls for the next slide 1 second later.

To create the actual functionality for this slider, add the HTML, create the XML, load the jQuery script above then set the slider by adding into your javascript document the following command (it should be on document load): AwesomeSlider('#unique_id_here','path_to_your_xml_file.xml');

Demos

You can check out live versions of this slider on Evenimente by Niki website's homepage and soon on the new version of our web agency's website.

If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Further reading

• 1. The change is here. Hover events come to mobile devices
• 2. Should I use on hover behavior?
• 3. Javascript DOs and DONTs. Complete with 17 examples from real web
• 4. Consistency. Key element in extraordinary UX
• 5. Buttons and usability

The Smashing Book is indeed… Smashing!

For most of you who already got the book it wasn't probably a painful process. Unfortunately, there are always a couple of exceptions to the rule, and I was "lucky" enough to be stuck with one. I pre-ordered the book way back in the late summer of 2009, because I wanted to get my hands on the book as soon as it was out. That turned against me, as the book that was sent over got lost in traffic. It was shipped on the 2nd of December last year, and it was late January 2010 and nothing smashing got stuck into my mailbox.

I didn't know what to do, and I sent over an email to Smashing Magazine's team. It was just a short brief line telling them it's almost two months since dispatch day and I still have nothing, together with my mailing address. I got a reply in less than 24 hours that said something like: "We're sorry, the book was lost in transit. But here's a tracking code of a new airmail shipping". Four days later, a couple of weeks ago, I got the book. Found the time to digest it, and here's the results.

Package

I think those great guys and girls at Smashing Magazine are Mac fans, because the book was awesomely wrapped. Getting it out of the package after such a long waiting time almost felt like getting my first Apple product out of its box. The quality of the paper is awesome, unlike many other books I got my hands on, which usually were more expensive too.

User interface design in modern web applications - Dmitry Fadeyev

The first chapter of the book is about user interface design, and was written by Dmitry Fadeyev who publishes the Usability Post. I've been reading his blog ever since he started it because it is packed with a lot of valuable information. On such grounds I didn't expect this chapter to be any less valuable. Unfortunately for me, reading Dmitry's chapter felt like reminding myself things I already knew. I am an avid reader and researcher on anything that deals with user interfaces and experience, and everything that Dmitry wrote in his chapter felt so familiar.

However, for someone who's new to this portion of the web, this chapter will make you pop a lot of questions. Questions on whether your websites and web apps have high standards or not. Questions whether your users feel great using your solutions or not. This chapter contains information about the little things that make everything feel so much better.

The art and science of CSS-Layouts - Kayla Knight and Jacob Gube

The second chapter of the book starts without intensity, but as you keep reading things get more complicated. Fixed, fluid, hybrid, adaptive or elastic layouts are all in there, and if you're still using only fixed-width layouts this chapter will make you think twice before going with them in the future.

Web typography: Rules, guidelines and common mistakes - Alessandro Cattaneo, Yves Peters and Jon Tan

I never thought that design, and typography ( to be more precise ), has to deal with math and mathematical formulas. This chapter will make a shift in your thinking with regard to typography and layouts — only if you're not some typography guru and this chapter will make you fall asleep.

Packed with a lot of unknown, unheard terms, this long chapter unfolds itself gradually, and the authors behind it did a great job explaining beforehand what they were going to talk about. I think this chapter is the best place to start your regular reading on typography.

After you're done with the Smashing Book's typography chapter, I really recommend this article published by Smashing Magazine on mathematics applied to designs. It contains a wonderful follow up story of the aforementioned chapter.

Usability principles for modern websites - Andrew Mayer and David Leggett

This chapter starts with a lot of information and guidelines that simply put is common sense. Or at least it seems so for me. If you don't know this stuff by now, I hope you didn't put a lot of websites up in the cloud by now. But as you approach the end of the chapter, there's some nice insights on different studies, possibly unheard principles and rules. Unfortunately, I'd have to say that this chapter somehow contrasts the quality of the first three chapters of the book.

The ultimate guide to fantastic color usage in web design, usability and experience - Darius A Monsef IV

This chapter was by far the easiest to read since I started the book. It does contain a lot of technical information, but the amount of perfect examples picked by Darius to emphasize what he's trying to point out is overwhelming. It starts with some basic information, advances to a few quality examples and by the time you finish the chapter you feel like you need to go to an art gallery as soon as possible.

If I were you, I'd leave this chapter alone and read it as if it were the last one in the book. After all, the Smashing Book contains 10 different stories, not connected to each other, so you can read them in any order you'd like.

After completing the book, I must say that the chapters do have some kind of flow, and maybe it's best if you read them in the order they are presented.

Performance optimization for websites - Rene Schmidt

I can't believe I am actually saying this, but as chapters go by, each one seems better than the ones that came before it. Rene Schmidt did a great job in the chapter he wrote. It is packed with server-side and client-side optimization techniques that you really need to know. If the chapter were a bit more complex, you could have switched from a dedicated managed server to an unmanaged one.

Design to sell; Increasing conversion rates - Dmitry Fadeyev

After reading the first chapter Dmitry wrote in the Smashing Book I was little disappointed, merely because I didn't learn new tricks. However, this second chapter of his was a bit more advanced, if that's the right word for it.

I liked the sell "solutions and benefits" concept instead of "services and features", and it was great to find out more about this technique.

How to turn a site into a remarkable brand - Chris Spooner

By the time you reach this chapter, you finally realize that all these stories told by each chapter of the book were carefully chosen. The book starts with basic website building techniques and covers the entire process in detail. Therefor, this chapter on branding is interesting because it points out a few things that can turn a website into a huge success. This chapter alone would have been a great way to end the book.

Learning from experts; interviews and insights - Steven Snell

I'm sure all of you, who would consider buying any web development book, read from time to time interviews with experts in the field. The Smashing Book also contains a chapter dedicated to chatting with some important figures in the web development industry. However, these interviews seem a bit different. Most online published interviews don't really pack useful information, detailed techniques, but instead have a more personal touch. The interviews published in the book seem more technical than what I was used to reading online. There are no "how's your typical day like?" questions. There's more questions like "what are the first steps when beginning a client project?"

Behind the curtains: The Smashing Magazine story

After the insights shared by great designers and developers in the previous chapter, getting to know what Smashing Magazine really is and how it evolved since it was launched was great. It is always inspiring to see how two people can turn something simple, basic and unknown into a fabulous success such as the Smashing Magazine.

Top chapters

• 1. Performance optimization for websites - Rene Schmidt
• 2. The ultimate guide to fantastic color usage in web design, usability and experience - Darius A Monsef IV
• 3. Web typography: Rules, guidelines and common mistakes - Alessandro Cattaneo, Yves Peters and Jon Tan

Final words

The Smashing Book is shinny and nice. Sometimes though it is too shinny such that text in inline pages is glowing making reading it really hard unless you change your light bulbs or light angle.

It's clear that the book is a result of a community, not one or two authors. Because of that, the quality of it's chapters range from chapter to chapter. On the other hand this makes the book more enjoyable as its style changes often. Bored of one author's way of laying out information? Don't worry, the next one will be totally different.

To conclude, the Smashing Book is indeed... Smashing!

If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Further reading

• 1. The change is here. Hover events come to mobile devices
• 2. Should I use on hover behavior?
• 3. Javascript DOs and DONTs. Complete with 17 examples from real web
• 4. Consistency. Key element in extraordinary UX

Get rid of unused elements in your designs

Just in case you didn't realize, a couple of days ago I have removed the unused header here on Web International Awards. When the blog got redesigned last year in March, that header was planned to hold huge thumbnails — if huge thumbnails is correct. However, things took off and I didn't have time to finish the header and really implement post thumbnails for the most popular articles that we've published.

Finally, I got some spare minutes, and I completely removed that ugly header and awful message it contained. The reason why I am giving this advice is that soon after the unused header was removed, the number of pages/visit improved with around 20%, and that can't be just a simple coincidence.

Therefor, be careful to keep the main content of your sites as high as possible. Perhaps if I fully developed the features of the header it would have resulted in better traffic towards older articles, but I think it is more important to keep new visitors as long as possible on current articles.

If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Further reading

• 1. The change is here. Hover events come to mobile devices
• 2. Should I use on hover behavior?
• 3. Javascript DOs and DONTs. Complete with 17 examples from real web
• 4. Consistency. Key element in extraordinary UX

Don’t abuse of uppercase letters

Have you tried reading the above two lines? The one that contains only uppercase letters seems to be harder to read, doesn't it? Well, it is true. Uppercase words are harder to read. Throughout this post I will highlight some facts that back up this statement.

First of all, lets see when we should be using uppercase letters and words. Capitals are used for capitalization, emphasis, acronyms, names and alike. You see a trend don't you? Capitals shouldn't be used in body copy or just simple lines of text for that matter.

Uppercase letters do not contain ascenders or descenders, which are proved to help recognition. Keyword here: recognition. Some researchers state that people read easily lowercase text because the brain recognizes some words due to the ascenders and descenders found inside them. Your brain recognizes words just by taking a glance at them, before actually reading the entire word. Uppercase letters don't have ascenders and descenders so in order to grasp a word you have to read it in its entirety, because the brain won't recognize it as easily as it does in the case of lower case letters.

Moreover, in typesetting, when an acronym contains many letters, small-caps are used instead of full capitals to avoid overemphasizing the word. Furthermore, it is generally accepted that in digital media such as emails, websites, using allcaps is considered shouting. You wouldn't like your visitors to feel as if you were shouting at them, don't you?

Next on Typography

This was the first article in a series on typography. Next article will contain information about measure, leading, tracking and word spacing. If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Buttons and usability

The other day I was talking to a friend about destructive actions in web forms, web apps, or any kind of apps for that matter. With any destructive action such as cancel, exit or delete comes great responsibility for the developer.

Delete links and buttons

You're responsible for each user who's frustrated because they accidentally clicked your delete button, and there's no way to restore their deleted work. This problem usually resides around web apps because only a few web apps offer undo / redo behaviors.

Mailchimp asks for delete confirmation, as you can see in the above screenshot. To make things worse, the popup takes ages to load, so the interface doesn't go as smooth as you'd want. Moreover, the confirm and cancel buttons are in close proximity. What if I accidentally click delete, than accidentally click confirm?

Cancel buttons in forms

The same goes with forms and their cancel buttons. Many forms have cancel buttons although I don't see their point. If you wish to cancel what you've done in a form, you simply go to another page or hit the X button.

However, some insist and put a cancel button in the form. Moreover, they don't just put it in a remote area of the form, they put it right next to the submit button. This inevitably leads to users accidentally clicking it instead of the submit button, which means even more frustrated users.

As you can see in the screen above, Five Cent Stand exaggerated with their creativity. Of course, their form is lovely, but can you see how close and similar are the send and clear buttons? You can barely see there's two distinct buttons. Really, really bad solution.

X or close buttons

Then there's the X (close) button which a few years ago was used only in desktop apps. Since the new rich user interfaces available on the web, a large number of web apps have lots of windows, and you guessed it, X buttons. The problem is nobody asks or tests if the clicks on these buttons are accidental or not. Making such check ups would be hard. And if you can't, you should check with the user if they meant it, which leads to our next problem.

What if we asked users if they really like to perform that destructive action (X, delete, cancel) or not? This sounds so Windows right? Moreover, this would frustrate and irritate even more users than before.

The percentage of users actually wanting to click those buttons is way higher than those who do it by accident. This means they'll get pissed of with you for asking them for confirmation all the time.

Is there a solution ?

It has to be, and here are some suggestions I thought might work. Let's start with the X button. One click may be unintended. How about a double click? I don't think that one could double click by accident. Even if that happened it would be just one user not plenty of them! The overall experience of almost everybody would definitely improve.

One solution for the forms canceling button would be placing it somewhere remote, far from the submit button, and styling it differently. What about delete buttons? A solution I think could work great is inspired from the Apple iPhone/iPod collection.

What if we developed delete and cancel buttons in a "slide to delete" fashion? Clicking them won't do any harm, but clicking and sliding for 30 pixels or so would trigger the event? Now wouldn't that please anyone?

Feedback

Please share your thoughts on this topic in the comments section. If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Further reading

• 1. The change is here. Hover events come to mobile devices
• 2. Should I use on hover behavior?
• 3. Javascript DOs and DONTs. Complete with 17 examples from real web
• 4. Consistency. Key element in extraordinary UX

Publishing schedule

It is almost one year since I relaunched this website, and as the 9 months stats show, it has been a good journey. I didn't put any advertising or funding what so ever to promote the blog except writing the content you're familiar with. But I want more, and I think that in order to achieve more from this blog, some proper management is required.

As you've seen, there were times in the past months when there were a lot of articles published just days after the last, and times when there were no articles published for weeks to come. I don't like that, and this is the change I am announcing today. From now on, there will be at least a weekly post, published on Tuesdays. I hope not to stop here and see more posts come published each week. Hopefully there's going to be one on Tuesdays and one on Thursdays or Fridays, but Tuesday's a promise.

Next on Web International Awards

This next Tuesday we are going to talk about buttons, links, and a lot of usability. We'll be studying a couple of websites, devices and applications, and see how we can improve user experience by improving simple buttons.

Upcoming

To take a glance at what's going to be published in the near future, I am going to write a couple of articles about usability. It's a trend huh here at Webia? There's going to be a smashing review of you guessed: the Smashing Book! There's going to be the second part of the awesome forms article and more! Stay tooned.

The change is here. Hover events come to mobile devices

I think that everyone knows that awesome YouTube movie about technology and how things that we learn today will become obsolete in 6 months or maximum 1 year. Well, when I published the hover behavior article just a few days ago, I certainly didn't think what I advised there will become obsolete so fast. I mean, I didn't see hover behavior coming to mobile devices this soon. Having this said, before going on with this article you should read the first article on hover events.

Apple has been granted a patent which has a mind blowing description, because it tackles proximity based systems and methods. What are those you may ask? Proximity methods are methods that a device can use to detect if there's an object placed in close proximity to its surface. Like a finger pointing above the iPhone's touch screen. Such method would also include performing an action if such an object is sensed.

Basically, this describes hovering events triggered by fingers, not just one finger. Apple has multitouch interfaces so why shouldn't they have a similar multihover event? At first hand, having such a feature in an iPhone, iPad or iPod would be great, because all the issues I described in the first article on this topic would disappear!

But would they?

No they don't! In fact, such a feature in mobile devices would only complicate the situation, because users could easily trigger lots of hover events simultaneously on a web page or web app. This has never been thought of and web developers have never taken this into consideration as PCs don't have multiple mouse pointers. This means there's no protection in websites against such worst case scenarios. Imagine a user viewing a drop down navigation menu that displays multiple menus in the same time. Imagine what their reaction would be, especially if the scenario happened by accidental hovering and the user would be taken by surprise. I also don't think that such a menu would be easy to use.

Such a new technology would technically fix the hovering issues of mobile devices, but would also trigger new ones, like the scenario described above, and would also give us power to create even greater interfaces by using multihover events. How cool would it be to point your finger to a product or pinch without touching the device to pop out details, and then click to buy it?

Here's a link to the patent (Granted Patent 7,653,883, originally filed in Q3 2005 by Steve Hotelling, Duncan Robert Kerr, Bas Ording, Jonathan Ive, Peter Kennedy, Anthony Fadell and Jeffrey Robbin).

Feedback

Please share your thoughts on this topic in the comments section. If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Further reading

• 1. Should I use on hover behavior?
• 2. Javascript DOs and DONTs. Complete with 17 examples from real web
• 3. Consistency. Key element in extraordinary UX
• 4. Enhance your clients list page with jQuery goodness