Things that are enjoyable will be easy to use and efficient.

The ALA article is defending the case that beautiful and aesthetically pleasing UI designs increase functionality because they’re perceived to be easy to use and efficient. What we’ve been practicing here is the theory that you can have an interface be more enjoyable through the implementation of functionality. That is, if a piece of functionality is fun, the user will perceive it as intuitive. Now there are limits to this; you can’t have something that is super fun and not functional what so ever. But, generally speaking, the more fun you can make a user interface to interact with, the more forgiving your users will be of any shortcomings.

Coverflow

Be honest, when coverflow was announced you thought, “Cool, but it’s useless.” Coverflow is one of the biggest successes of “fun” in UI design. It has some great functional uses when browsing folders on your mac full of images, but past that, it’s a stretch to say it’s a great way to browse files. There are far more efficient and more usable ways to browse cover art in iTunes, or to browse visual files on my mac, but I still find myself using coverflow more often than I thought I would. That’s because it’s fun to use. Moving that slider and seeing my files or album covers rotate and move in 3D space is a delight. On the iPhone the fun is amplified by swiping your finger and having it respond in real time.

Time Machine

Apple is the master of adding fun to user interfaces. If you look at why or how their user experience is so successful, 9 times out of 10 you’ll find their solution is just plain more fun than the competitions’. Time Machine is another example of this. Backup software is a fully developed genre, but Apple decided to step in and make a big splash. They made Time Machine completely unlike any other backup software out there. Using 3D and a crazy time portal background that you manipulate with an actual time line makes using backup a joy. In fact, I would argue that it was Apple’s primary focus when designing the UI for Time Machine. It’s like healthy chefs making food that’s good for you actually taste good. Apple made the important, mundane task of backup fun to use.

Adding Fun to Your UI

It’s no doubt that Apple churns out some of the most fun to use software out there, but we can all start doing a better job at making our UIs more enjoyable, particularly on the web.

Sliders

Sliders are a great alternative to the standard form elements like drop down menus or text inputs.

Animated User Feedback

Giving feedback to the user for their interactions is critical to good UX, but you can take it further. It is now easier than ever to surprise and delight users with javascript frameworks like jQuery and Scriptaculous.

Drag & Drop

Another great way to spice up a UI is to give it more drag and drop functionality.

These are just a few ideas of what you can do to make your user experience a little more fun for your users. Some of the best solutions involve innovative interactions like the swiping to unlock an iPhone, the motion sensor controls of the Nintendo Wii, or that first time you realized you could pan around Google Maps without reloading the page. Of course, you can’t always have an amazing breakthrough in user experience, but if you make it one of your goals to let your users have fun, you’ll find that their emotions will be more positive and thus their user experience will be as well.

Build as little as possible to start.

If you build a massive app with 300 features, then your users may be stuck using what you’ve given them. However, if you launch your app or new feature with the bare minimum, then your users will use what you’ve given them and tell you what direction to go to make improvements. A great analogy brought up by Daniel Burka of digg is the story of an MIT architect. This architect built a building and instead of sidewalks outside it they just covered everything in grass. Then they came back a year later and got on the roof. They took a picture of all the wear and tear on the grass made by the foot paths of all the people going to and from the building and covered them with cement to make the sidewalks. Let your users pick the direction of your app.

The future of web applications is people.

This was a point brought up many times by multiple speakers. It revolves around the idea that we’ve started and built the web first, then we added people. We are going to focus greater attention on how to build the web more around people and less around technology. Facebook Connect is a huge example that seemed to be everywhere at fowa, including a presentation by Dave Morin on the topic. Facebook Connect is just an example of the broader concept – if you build an app that brings about a lot of new tools and tech for users than you need to learn how to make those tools and tech revolve around people, not their function. Build your apps around people, not just good function.

Be a skeptic.

Don’t ever think that because this tip helped person A it’s going to help you. Don’t listen to how this new tool coming out can really help person B and assume it can help you. Really, really think about the hundreds of tiny factors that made it work for them. Through that search you’ll find out what might work for you and you’ll see it’s nearly always somewhat different. Moral of the story, facebook connect is awesome but I don’t care (though lots of other people probably do). Atlas from 280 north brought a tear to my eye it’s so good, but I don’t think it’s going to work out for me as well as he made it seem it would. Percentage coupons work for 37signals but why on earth should I think it will give me the same results? Be careful of anecdotal tips, find out what works for you.

Twitter, WTF?

Seriously it’s gotten out of control. When I heard, “for the first time ever you can tweet to space” I thought, really? Is that surprising? Is twitter that old that we really view that as a breakthrough? I heard twitter said at fowa as much as I used to hear “web 2.0″ thrown around. Don’t get us wrong, we’re not knocking it. We even have our own twitter page to prove it.  However, we did see 10+ people within twelve feet of us using twitter at once (in fact, we started tweeting just to see how many screens we could see our tweet on). Google is not the Internet. Neither is twitter- and don’t forget that.

Recognize the value of what you are creating.

One of the first things mentioned at the conference by the opening speaker Jason Fried (of 37signals) was that web developers need to start charging more. Many of us feel that we have to develop an awesome web app and provide it for free to get anyone to even pay attention. Jason argued that it hurts the industry. Rather than succumb to this temptation, we need to develop sustainable business models. If we create something that is truly of value, there is nothing wrong in charging a fair price for that value. Free is dying, start making money.

Give people a reason to love you.

Consumers have more power than ever before. Not only do they have a growing number of choices, they have more information (and more potential influence over others) than in the past. If people are going to stick with you, they have to have a good reason to. And this comes back to truly caring about your customers. As Gary Vaynerchuk put so eloquently, “You want a marketing strategy? CARE!!!”

Design matters. A lot.

I tend to be a functionality guy. But the importance of compelling design was a theme that ran consistently throughout the conference. Delicious Library was offered as a telling example; this program made millions by taking something that could already be done (making a catalog with Excel) and giving it an attractive and fun interface. Even though functionality is important, at the end of the day we enjoy using things that are well-designed. Make your apps fun to use and good to look at, people lust for movie stars, not old fat balding men.

Overall Future of Web Apps Miami 09 was an excellent experience and we wouldn’t hesitate for a second to go back again. Great job to all the folks at Carsonified.

For those of you who are a less of a geek than I, FOWA is the Future of Web Apps Conference. It is one of many wonderful events that Carsonified puts on every year.  We will have the pleasure of spending 3 days in downtown Miami, attending workshops, presentations, parties, and fraternizing with the ‘web-developers A-list’.

We are going to try to keep all of you updated from the conference this year, using this crazy thing called ‘Twitter’.  So, check out twitter.com/thewojogroup next week (Feb 22-24) for updates, pictures, and stories from FOWA Miami 2009.  

And for those of you lucky enough to be going to FOWA also, we’ll see you there!

The Markup

The first thing I do anytime I start HTML/CSS work is code the HTML. It’s a personal preference to make sure it’s all going to look good for screen readers and be as semantic as possible, and since it’s my article we’re going to do the HTML first.

<dl id="csschart">
<dt>Mon</dt>
<dd>36</dd>
<dd>30</dd>
</dl>

Like Alen Grakalic’s implementation, I used a definition list. I found it to be the most semantic way of presenting data like this. To explain, each day of the week is in a <dt> tag and the data for that day is in a <dd> tag. There are two <dd> tags for each day, one for our page views and one for our unique visitors.

<dt>Mon</dt>
<dd class="p36"><span><b>36</b></span></dd>
<dd class="sub p30" ><span><b>30</b></span></dd>
</dl>

Each <dd> is given a class that corresponds to the percentage of that bar. p100 is 100% the height of the graph and p0 is 0% the height of the graph. Making 100 classes is a pain and a lot of CSS but it makes it so easy when you’re turning these graphs out dynamically.

The other class to which we’ve added some of the <dd> tags is “sub”. This denotes the stacked bars in the graph that will be put on top of the other <dd>.

Finally, we wrap our data in <b> and <span> tags so we have enough to work with when we’re styling it.

Styling the Graph.

dl#csschart, dl#csschart dt, dl#csschart dd{
margin:0;
padding:0;
}
dl#csschart{
background:url(../images/bg_chart.gif) no-repeat 0 0;
width:454px;
height:360px;
padding-left:11px;
}
dl#csschart dt{
display:none;
}
dl#csschart dd{
position:relative;
float:left;
display:inline;
width:33px;
height:330px;
margin-top:22px;
}
dl#csschart span{
position:absolute;
display:block;
width:33px;
bottom:0;
left:0;
z-index:1;
color:#555;
text-decoration:none;
}
dl#csschart span b{
display:block;
font-weight:bold;
font-style:normal;
float:left;
line-height:200%;
color:#fff;
position:absolute;
top:5px;
left:3px;
text-align:center;
width:23px;
}

/* Styling the Bars. */

dl#csschart span{
height:50%;
background:url(../images/bar.png) repeat-y;
}
dl#csschart .sub{
margin-left:-33px;

}
dl#csschart .sub span{
background:url(../images/subBar.png) repeat-y;
}

dl#csschart .p0 span{height:0%}
dl#csschart .p1 span{height:1%}
dl#csschart .p2 span{height:2%}
dl#csschart .p3 span{height:3%}
dl#csschart .p4 span{height:4%}
dl#csschart .p5 span{height:5%}

/*This continues until 100%*/

The first thing we do is reset all the margins and padding to make it look the same on all browsers. Then we define the width and height of our chart in dl#csschart. We’re using a background image to help with the tick marks on the axes and for some background gridlines. One important thing to note is the padding-left. This moves the first bar over past the tick marks on the left of the background image.

Next, we hide the dt tags. There is really no good way to make them do what we want. Position the dd tags to float left and use margins to push them to the correct place in our background image. Now, just to be clear, the dd tags are not our bars, they are simply containers for our bars. They are all 100% of the height of our graph. We use the span tags inside the dd tags to fill in our bars. Since they’re positioned absolute inside our positioned dd tags we can use bottom:0; to place them on the x-axis and have them grow in height from there. We use the b tag to display the actual data value inside the bar.

At the bottom we define the background image for the bars in dl#csschart span (you can easily just make it a background color instead), then we position our .sub bars overtop by giving them a margin-left of -33px (the exact width of the bars).

Finally, we make our 101 classes for each percentage point from 0% to 100% to give our bars their height.

I’ve made a diagram to explain what each tag is doing.

Add the Axes.

Ok now you’ll notice we don’t have labels on our axes. So we use some simple unordered lists. One before the cssChart:

<ul class="yAxis">
<li>100</li>
<li>90</li>
<li>80</li>
<li>70</li>
<li>60</li>
<li>50</li>
<li>40</li>
<li>30</li>
<li>20</li>
<li>10</li>
</ul>

and one after the cssChart:

<ul class="xAxis">
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
<li>Sun</li>
</ul>

Styling the Axes.

ul.xAxis{
margin:0 0 0 27px;
padding:0;
float:left;
clear:left;
display:inline;
width:454px;
}
ul.yAxis{
margin:14px 0 0 0;
padding:0;
display:inline;
float:left;
}
ul.xAxis li{
float:left;
list-style:none;
width:33px;
text-align:center;
}
ul.yAxis li{
list-style:none;
height:33px;
text-align:right;
float:left;
clear:left;
}

Styling the axes is really just floating the the y-axis left and using some margins to push it in place. Then you can use some margins to push the li tags to line up with the tick marks of your background image.

First we’ll start off with a photograph of an equestrian horse jumping. This one is from iStockphoto.com, feel free to use whatever picture you’d like.

Step 2

Open your picture in Adobe Illustrator. Trace an outline of the horse and rider with the pen tool. Don’t worry too much about the tail or mane, just give it a nice outline- we’ll work on the details of those areas later.

Step 3

Tweak the finished outline of the horse. You may need to use object > path > simplify… to smooth out your work.

Step 4

Now we’ll make a brush to add some of the fancy curls and swirls for the long hair details of the horse. Start by making a circle with the shape tool. than use the direct selection tool, , to grab the bottom point and pull it down. The result should be something like below.

Step 5

To make this shape into a brush we’ll go to the brushes palette and select “new brush…”

Step 6

Select Art Brush.

Step 7

In the option box match the settings below.

Step 8

Now we’ll start to add in some of the hair. This uses a combination of techniques that you can choose from and mix and match to create the hair. The first is the arc tool. Draw an arc on the tail to start making some of the detail hair. Repeat as necessary and if needed you can alt click the canvas with the arc tool to bring up the arc tool’s options.

Step 9

The other technique to use is the spiral tool,. Again, alt click the canvas with the spiral tool to bring up its options. After some use of the arc and spiral tools you should come up with something resembling this:

Step 10

Now all we need to do is the mane. You can continue to use the same two spiral and arc techniques, but since its smaller, finer hair I went for the brush tool. If you double click the brush tool you can bring up its settings. It helps if you turn up the smoothing. Then, just use the custom brush that we’ve been using, turn the stroke width down a little, and start drawing some hair on top of the horse’s neck. Here’s what it should look like.

Finished Product

.

The information architecture was reduced to pure simplicity. There are only 3 pages on the whole site- Home, Catalog, and Contact. Take note that there is no cart page.

For the shopping cart we employed a rather inventive technique. When an item is added to the cart a bar at the bottom of the page appears to show all of the cart functionality and products. From this bar you can checkout through PayPal. If you’re a return visitor the bar will appear just as it did when you last left the site. When the cart is emptied, the bar disappears.

The Branding borrowed the standard horse jumping mantra of Equestrian brands and took it a step further. The horse is jumping over the logo type and has some extra flare to set it apart and make it more “hip” . The raindrop helps convey that Invisequine Co. sells equestrian rain products.

In a future article I will walk through the process of creating this logo from start to finish.

Matt Cuts, an employee of Google’s search engine team, noted in this video that Google had no preference between <b>/<i> and <strong>/<em>. So if you’re worried about SEO (search engine optimization) reasons for using the more semantic tags, don’t worry about it. However, I’ve put together a good checklist here to go over when you’re deciding which tag to use:

• <b>- Strictly a presentational element. If you want text to be bold but not have any semantic meaning.
• <strong> – Strictly a structural element. If you want text to be spoken with strong emphasis using a screen reader.
• <i> – Strictly a presentational element. If you want text to be italicized, but not have any semantic meaning.
• <em> – Strictly a structural element. If you want text to be spoken with emphasis using a screen reader.