Archive for the ‘ajax’ Category

Video is the new AJAX

Monday, April 14th, 2008

TVImage via WikipediaRecently there’s been a lot of video news sites popping up here in Slovenia. In addition to TV networks almost every newspaper site now has a video section. I understand that these sites need to evolve and that media is changing. Every year we see statistics changing telling us we read more on the web and less newspapers. Even TV is losing ground. The media business is changing and in this ever changing world the easiest and the cheapest solution is to follow what others are doing. Unfortunately this also means that you do things without thinking them over thoroughly.

When you do that you have a problem – you’re thinking that you’re giving readers what they really want but in turn you’re giving them what you want. Or what you think they want – either way you’re not on the right track. That made me think of the ways I watch video online and the ways I want to watch it.

Podcasts

Most video I watch is actually not on the internet – it gets downloaded (almost) automatically into iTunes. I don’t watch the podcasts everyday even though some podcasts are daily news reports.

So local media companies are adding podcast feeds to their video content and hoping that people watch them[1]. Newsflash – podcasts are not a technical issue. Most people don’t even know what feeds are (another story), why do you think that they know what podcasts are?

The solution here is quite simple – for a quick start of course. Make real podcasts, use the news you’re making or providing on your site already. This way you can leverage your existing content while providing something that people might actually watch. Focus on local news[2] and target the younger audience, with daily episodes not exceeding 4 minutes in length. A very important thing is choosing the presenter – they need to reflect your your goals and suite your target content and audience. This means that your average TV anchormen won’t work – check the most popular podcasts to get the feeling what you’re looking for, keywords probably being humorous, personal, friendly.

Such podcasts have a few possible ways of monetizing themselves. One possibility is to add commercials (add them at the end, not the beginning), you might have weekly or monthly sponsors that you display in the background or even at the beginning of the show (not more that one screenshot). Since you can differentiate your subscribers from random web users you can adjust advertising to get most from both worlds. Be creative!

TV shows

Fortunately both local TV networks now have ways of watching locally produced shows I’ve missed. I do that quite often[3] since I can’t really fit some of them into my already busy schedule. When I’m watching such a show on the internet that’s probably the only thing I’m doing at that specific time and means that the computer is actually acting as if it was a TV.

Since I can move the slider you can’t push ads to me as you would on TV. That doesn’t mean you can’t have ads in such shows, you just need to think about them differently. What I do often is pause the video to check my email, browse around or just wait for the show to download – perfect time for placing ads. When I come back there’ll be an ad waiting, I’ll click next and continue watching the show.

The idea is not mine – when I was in the Netherlands a few years ago I went to the movies – in the middle of the movie there was a commercial which announced a brief break during the movie. I don’t remember the commercials going on while the break lasted (we all left the theater) but they were on again when we started coming back.

A great option with watching TV shows would also be to allow me to set the shows in my profile – that way I could see when something will be on TV and when I can watch it online. If I have a few shows to check you should allow me to add them to a playlist much as I would in iTunes or on my iPod. And I wouldn’t mind ads in between – if I’m watching a show that has already preloaded you could preload an ad into memory and play it while you start buffering the next show in my playlist – I’d have to wait anyway. You could also create a podcast that would push the shows I added or subscribed to.

Video news

This is the one that most media providers do currently and get it wrong most of the time. When reading news on the internet I’ll have many tabs open since what I’m doing is browsing. This means I’ll start at the homepage and then click on random news there, maybe click a category I’m really interested in, when news open I might click some related news and so on. This “trip” is rather random and fast.

Since I’m in browsing mode I’m more likely to only skim the information on the news page. This means that when I come to a page that only provides a video I’ll have nothing to skim and will close that tab immediately. I won’t see the ad in front of the video and I won’t see the video. In a month I might discover that I’m not getting quality information and move on to another site that will let me skim what I want to skim and fully concentrate on what I want to see.

Video as add-on

One solution to this problem is to use the video to convey information that text can’t. For example if you’re talking about a football match you might add video of the best move or all the goals scored. Another possibility would be that you’re pushing news on Britney and you add video of the incident. This way I can skim the news, figure if I want to see the video and check it if it interests me enough.

Video as primary content

When you think the only way to present content is video (I don’t think that ever happens but some do) you could use the idea already mentioned – profiles and sort-of bookmarks. I first saw this implemented on the International Herald Tribune website for text only articles – while browsing and skimming for interesting news you add what you want to read to your profile. At the end you can sit back and read what you saved or in this case check your own news show. Hey, you could even add social features to this with sharing of such shows (technically speaking playlists) with friends,… This also makes ads less invasive since you can add them less often then on every video I watch.

AJAX?

Some of you might know that I hate AJAX and I do for the same reason I hate video on the web currently. There’s a bunch of idiotssites shoving it down my throat in totally inappropriate ways and I really hate being molestedbothered this way. Technologies are here to solve problems and the only way they can do that is if people think what problems they solve better than others. That way we can read the news, watch the video, get an AJAXy[4] exeprience when and where we want to and where that specific technology solves our problems best.

  1. I’d really love to see the statistics on that. Anybody know where to get them? back
  2. We get world news in other podcasts or from other sources – keep it linked to what you know best. back
  3. More often on PopTV since I prefer their way of delivering content – via a fullscreen Flash interface – opposed to a small Windows Media / Real player on RTV Slovenija. back
  4. By the way – with all the AJAX around home pages of both local media houses reload automatically (which could really be an asynchronous request to retrieve the latest news) – one with a meta refresh tag and the other with inline JavaScript. back
Zemified

About forms: messing up the interface

Thursday, December 13th, 2007

When creating interfaces you often come to a point where you need to decide what your priorities are. The most obvious choice is to cater to the needs of the user. Unfortunately when doing online business sometimes this is not easy to achieve due to certain restrictions. It then becomes an economic choice.

To simplify the problem let’s say you’re designing an interface for a contact form. There are a lot of people involved in the problem and they all have their own issues they want resolved.

UX expert

Obviously the users want the form to be simple and can be filled without thinking[1]. Their ideal contact form would only consist of two or three fields. Usually this is also what you would get from the UX guys…

The simple contact form
HTML example – the simple form

Sales agent

On the other side of the form you should and most probably will have somebody that will process the form, let’s say it’s a sales agent. He’s not going to like what your UX expert mocked up because it doesn’t give him enough information about the lead[2] that is asking the question. So you’d get something like this:

The sales agent wants more data
HTML example – sales agent “enhanced”

Programmer

When a programmer sees this she won’t like it at all. She would say that this contact form really gives her no way to enter the data into the customer database. There is no way she can figure out what the name and surname are, what the postal code might be if it’s there at all and she also needs more contact information since the new database requires all customers to have an email address and a mobile phone number. You’d now have a huge contact form like this:

The programmer needs to put this into the database
HTML example – programmer “enhanced”

Marketing

Since everybody has a stake in the website and they know better you would also get the marketing crew to add some checkboxes at the bottom of the form. They might also want some other “relevant” information about the user – at least the date of birth and the gender.

The marketing and the legal kick in
HTML example – marketing “enhanced”

Legal

At the end the legal department insists that you add one more checkbox at the end of the form that “blames” the person that submits the form for everything and anything that can possibly go wrong[3]. If you’re lucky the same checkbox will be used to convey that the data will be held for at least seven years and that it can only be uses inside “the group”.

The marketing and the legal kick in
HTML example final version

Oh my!

So now you have a contact form with 15 fields (technically you have 18) instead of 3 which is a surplus of 400% (500%). It’s obvious that each step adds more information that is valuable to the company if it actually uses it. A really good company will know exactly how much the data is worth (lead conversion rates, programming fees, marketing material CTR + conversion, legal issues) and would probably stop at the first form. Others seem to think that this data is more valuable than the drop in the users submitting such forms due to the vast amount of information that needs to be given away.

They want it all

If you can, try to convince the client to use a simpler form. The legal department might help you there if you have any laws in your country that deal with retrieving customer information that is not directly needed to the action taken by the customer. You might be able to create two forms, display each to half of the users and test the responses.

Field length

If you really have to do it, there’s stuff you can do to help people. If you check the example forms you’ll see that the input fields have variable length – they try to match the amount of data that is needed to complete the form successfully. The reason for this is that the form seems easier to fill and doesn’t look like one of those insurance forms you need to fill when you had a car crash.

Simple input

Use various types of fields in a way that helps people fill them correctly. Don’t use a text field if there are only two options and don’t use a free form field for the input of a date. Use checkboxes, radios, drop-downs – they’re each good for something. You can also use advanced JavaScript controls like sliders, calendars or autocomplete but use them wisely.

Validate on the fly

You could also add JavaScript to validate the forms on the fly. By that I mean that while a user is writing in a field some visual cue (like a green tick and a red x) would tell the user the field has been correctly filled. A lot of discouragement with long forms comes from the fear of having to refill the form if a single piece of information is input invalidly.

If you want to know more about forms check out the article Web Application Form Design by Luke Wroblewski or wait for his book Web Form Design Best Practices

  1. Check Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition by Steve Krug. back
  2. Sales people don’t interact with people, users or any other lifeform – they deal with leads. Read more about leads in Managing Sales Leads: Turning Cold Prospects into Hot Customers by James Obermayer back
  3. If it can go wrong, it will – Murphy’s Law back

Retrieving forgot passwords

Wednesday, November 8th, 2006

You know how you allow your browser to save passwords and then forget the master password and can’t see the passwords anymore? Or you own IE6 where you can’t even see what the darn thing saved?

When I was in a situation like this I wrote a simple favelet/bookmarklet that lets you steal your own passwords that are autofilled by the browser.

When run, the favelet will go through all the input fields that have type set to password (the ones you can’t see, cause the browser will mask the content to * or dots) and alert their name and value.

This kind of script, combined with XHR can be a powerful attack tool since you can use it to steal passwords of other people if you can slip it in the page they’re looking at. More about it on ajaxian. Don’t use this script for anything like that!

Web mashups – LIFFe

Monday, October 30th, 2006

A few days ago the local film festival LIFFe launched its programme. Again it was not an exceptional work of IA or UX. You can access the whole list of movies that leads to individual movie pages that contain details and the showing times. You can also check the schedule by individual date that unfortunately contains almost no details about the movie – just the title. Sections of the festival do not have a page where you can see all the movies that compete in that section.

So I decided to create a quick mashup of all scripts that have been lying around my disk for some time now. This proved to be a quite difficult task because of a lot of reasons. The first one was that the code behind the page is incredibly ugly – table layouts in table layouts without ids, classes or almost anything you can use to find your way around it. The next problem was the encoding and my use of php that is not too friendly to windows-1250 encoding used on the source page. Eventually I did it in a bit less than a day – it’s not perfect, but I think it shows that it can be done better and it does not take more time.

I have some stuff to add but since the festival is getting closer and closer I present Program 17. LIFFe festivala.

The page uses some AJAX (XHR to be exact), DOM parsing of the source data and SortedTable to present the data.

Triptracker

Saturday, October 28th, 2006

Spletne urice served its visitors a great talk from one of the founders of a Slovenian company called Klika. It’s primarily a software company that specializes in tracking software with GPS and then mapping the data to support sporting and other events (like the Ljubljana marathon that’s on tomorrow).

But the talk wasn’t about their programming but rather about the first global Slovenian Web2.0 website/service – the TripTracker. In short it’s a website that allows you to upload positional data along with pictures, matches them all up by time, draws a map and more or less creates the whole trip into a nice little presentation that you can use to show at meets or just send to your friends. It’s also a good resource for travelers that want to travel to places they know almost nothing about – you can check other people’s trips and see where they went and what they saw and see any comments they might have made.

The most fascinating thing about all this is that they created all their mapping data themselves – all the JavaScript and html for the mapping was written for this site exclusively and all the images converted from NASA sources (I hear Google has exclusive rights on HQ satellite photos so no other mapping service can use them). As the talk progressed questions were popping to my mind but were soon answered – the API is in progress, the service can use Flickr as the image resource and they might even switch their own mapping tool with Google Maps. One thing that came as a surprise is that they’re not using Microformats even though it clearly supports stuff they present on their site. They do allow export to KML though. As all true Web2.0 sites TripTracker also has a developer blog so check it out to see when they release the API to the public.

The slides will probably online soon.

Another reason to hate AJAX

Wednesday, October 11th, 2006

Maybe I forgot to mention this in my talk about why I hate AJAX but this is a very good point against a lot of AJAX use. If I have to wait for the content I might as well see the whole screen redrawn – it’ll wake me up after the loading is done. If you’re able to guarantee an instant response do it, otherwise don’t. How would you feel about “suggests” that you can see 10 seconds after you typed something?

If you weren’t able to see me talk about AJAX – I hate it because so much of its use is just plain wrong and the perpetrators should have their clicking fingers broken and internet connection reduced to 2400bps.

Talking about talks – a new season of Spletne urice, weekly talks at the local multimedia center Cyberpipe is starting next week. I hope we’ll get some foreign speakers this year – we’re offering costs to cover the trip to lovely Slovenia and a limited number of hotel nights so you can see the countryside. If you have no idea where Slovenia is or what it’s like let me just point you to slovenia.info and tell you that you can see the mountains and the sea in just two hours.