All posts tagged ‘tutorial’

File Under: UI/UX

Information Architecture Tutorial – Lesson 2

Define the User Experience

After figuring out why a site should be built, the second most important aspect of designing information architecture is determining who the audience is. This is an invaluable step that many people fail to grasp. Many sites do not even take into consideration who will be using them. How can you design a site if you don’t know who’s going to be seeing it?

Some people think an audience is defined by the technology it uses to access the site. This, too, is missing the point. That a user visiting the site uses a 28.8 modem is only a small part of the audience definition. A true audience definition consists of who the users are and their goals and objectives. Scenarios, or stories, are useful in visualizing the audience.

Oftentimes, a single department or group in a company takes the lead in putting together a Web site. The result is usually a site focused on that group’s needs, which ignores the needs of everyone else. For a long time, MIS departments were responsible for putting together their corporate sites. These sites were utilitarian, and neglected important departments, like marketing. It is your job to prevent this from happening on your site.

Defining beforehand the user experience you seek establishes a clear, well-documented definition of your audience, and it helps in understanding how users will react to the site.

To get started on this stage of the IA process, just as with defining the goals, you need to figure out who will be involved and how much time you will have. Generally, the same people will be involved. However, you probably will change how you weigh each person’s opinion. For example, the marketing department should have a good idea of who your audience is. If that is the case, you’ll want to listen to them more than to others.

Defining the audience takes less time than defining the goals, because you have already established how you will be working with people – whether formally or informally – and you are more familiar with asking them questions and getting responses.

Continue Reading “Information Architecture Tutorial – Lesson 2″ »
File Under: Backend

Gather Users Data From Server Logs

Hey, you! What are you doing? Where are you going? More importantly, what are you clicking on?

If only it were that easy. But no, most users like to travel the web incognito. They come to your site, poke around a few files, download a PDF or two, and then — poof — disappear, leaving nothing but questions in their wake:Where did they come from? Which browsers are they using? Are they experiencing any errors?

The most thorough method of tracking users is by planting cookies, which some folks consider rude or invasive, and, oh yeah, you need to know how to program them. Not to worry — there is an option that requires very little technical know-how, comes at no (or nominal) cost, and may already be a part of your site’s backend. I’m talking about logs!

Continue Reading “Gather Users Data From Server Logs” »
File Under: APIs

Using the Delicious API

Who’s that with the catchy URL that’s getting all the clicks?

Why, it’s del.icio.us! No matter where you are on the “is-web-20.html Web 2.0” lash or backlash, the pervasive influence of this little bookmark aggregator can’t be denied. On the surface, it doesn’t do much more than the PHP tool I wrote back in 1999 to collect my bookmarks in a centralized location. So, you may ask (as I have asked myself repeatedly) why should I care, apart from the appe.al of spe.lli.ng ever.yth.ing like th.is? Well, the devil is in the details.

A few crucial features bear the responsibility for del.icio.us’s success. Most basically, it is a “social bookmarking” site – not social in the sense that you get to know whether your fellow users are Beck fans (although you might), but rather in that everybody’s bookmarks are in one big pool together. You can view your own or someone else’s. Or everybody’s.

Such a morass is ripe for confusion, which is where the next great innovation comes in: tagging. By now everybody uses tags to sort information, but their usefulness is easy to underestimate. Users can add any number of these descriptive keywords to their bookmarks. On del.icio.us, Webmonkey is tagged variously with web, webdesign, html, reference, css, programming, design, tutorial, tutorials, webdev, tips, resource, development – the list goes on. The proliferation of tags makes it easy to find links relevant to a particular subject: just go to http://del.icio.us/tag/webdev to find all links tagged with “webdev” – or triangulate by searching on the intersection of multiple tags: http://del.icio.us/tag/css+reference+webdev. Compared to the hierarchical limitations of putting things in folders, say, using intersecting tags is deliciously freeing.

Continue Reading “Using the Delicious API” »
File Under: Programming

Advanced VI Tutorial


Well, mobile Webmonkey, if you read our article Tutorial:VI Tutorial for Beginners on the basics of vi, you’ve probably jumped feet first into vi practice, discovered that the mouse really doesn’t work, and practiced a little deleting and adding text of your own. But typing jjjjjjjjjjjj and dw might seem a little limited for serious HTML work. This tutorial focuses on what happens when you’ve mastered the basic moves in vi and are ready for a little more functionality. Continue Reading “Advanced VI Tutorial” »

File Under: APIs, Location

Using the Google Maps API

Google Maps is perhaps the biggest and most useful of all the common web APIs. Who doesn’t love clicking and dragging those sleek, clean maps? But it’s also one of the more complex APIs, which can be intimidating for newcomers. It’s also somewhat difficult to immediately recognize all the possibilities of the Google Maps API since there are literally hundreds of ways to use it.

We’re going to dive right in. But to keep things simple, we’ll start with a very common use: Adding a map to your site and displaying some markers.


Continue Reading “Using the Google Maps API” »