A poorly constructed site uses too much copy, has dated graphics, and gives no consideration to information hierarchy along with several other factors. It basically makes its user work hard for her money.

This is what I'm faced with after I log in to pay my OG&E bill. It's not entirely clear how to pay your bill, unless you've used it a few times and remember the "Pay Bill" link it in the upper left corner.

OG&E, I fixed it for you.

A beautifully constructed site has it all. It presents easily digested information, it has a crystal clear hierarchy and fresh graphics along with several other elements that make it successful. Users can get in and get out without having to think too much.

So, why do we put up with bad sites? Here is my theory: When we visit service sites (online bill pay) we form our opinion within seconds. When its bad we might begin to think “well, they are a small company, they probably don’t have a lot of money for fancy designers or developers. It’s cool, ill work a little harder to use it.”

We have a higher level of acceptance for bad sites because we really want to use it to pay our bill, instead of writing a check, placing a stamp on it and dropping it into the mailbox (remember that?) It’s like your alcoholic uncle, he means well and he’s family so you make excuses for him. Plus, he’s fun to drink with.

So what happens when you visit the good site and you can’t do something that is presumable easy? Remember, this is a good site! You go to the site and immediately feel like these guys have their act together. In fact, you have probably successfully conducted business there before so your expectation is high. That is what happened to me this afternoon.

I’m giddy about DirecTV’s site. It’s a great site. I’ve used it before. I looked at some equipment, I added a couple channels, i paid my bill, life was good as a DirecTV site user. Recently, my bill had gotten a bit high, so i decided to evaluate my options. I logged in and easily navigated my way to the “My Programming” section of the site. $36 bucks a month for HBO, Cinemax and something called SPORTS PACK (does it really need to be all caps?)

I like HBO’s original programming, so i’m keeping that. I’ve already seen all the Emmanuelle movies when I was a pre-teen so I can do without Skinemax. I don’t even know what SPORTS PACK is… plus its all caps, so that has to go.

I am on the site, decisions made. Ill just remove… these… WAIT A MINUTE! Why are these links grayed out? Why are they so small? I can’t remove these channels? WTF? Seems pretty weird since judging from the giant orange buttons that say “Activate Now” you should be able to make these kinds of programming changes. By clicking those big beautiful orange buttons you can add programming like a mofo, but to remove programming you have to CALL IN.

There are so many programming packages you can add, there is a scroll bar...

To make a long story even longer, I called DirecTV and 15 minutes worth of holding and 2 department transfers later, I made my programming changes. I get it. I really do. You want to make it easy for your company to make money and hard for your company to loose money. I can see that. Maybe ill decide to call in later and cancel those channels, and then not get around to it for a month or two. Maybe ill just forget all together.

DirecTV claims to have 18 million subscribers, so let’s say 1% decided to remove 20 bucks worth of programming, but didn’t because it wasn’t convenient to call in, forgot, whatever, that’s 3.6 million dollars… a month.

At the end of my call with DirecTV, I asked the customer service rep why I could add programming, but not remove it on the web site. Her official response was “uuhh… well… sometimes it lets you, sometimes it doesn’t…”

I dug a little further asking “Is that intentional?”

Her response was “I don’t really know why sir… I’m sorry.”

I can see the suits in accounting calling the web department and asking “How easy is it to limit the ability for a customer to remove programming on the web site?”

I think I know the answer.

Green Version with some texture.

Come on in to check on the other color versions.

Cool Blue version.

School Colors!

Level 1. Base navigation, everything collapsed.

Level 1. "Build & Maintain a Site" hover effect.

Level 1, selected item. Arrow tip would point to the middle columns page content.

Level 1 selected with children.

Level 1 expanded with level 2 child selected.

Level 1 expanded, level 2 selected with level 3 children expanded.

Level 1 expanded, level 2 expanded, level 3 selected.

I think its coming along nicely. The texture in the selected arrow will be carried over to other areas of the site. I look forward to showing this off once its up and running!

For their logo, CAN wanted something clean and modern. Structured without being stuffy. Simple treatment with Neutra Book mixing upper and lower cases. deep blue and lime green provide the contrast.

Cassie provided all the copy for the first poster and she said “make it fun” So I did.

I decided to talk about web usability and how important setting goals for your site and organizing your information is as well as poke fun at http://www.evangelcathedral.net/ a usability nightmare, but AWESOME graphix! (graphics with an “x” means its extra badass.)

About halfway through my presentation, I get the air horn signifying my 2 minutes of fame has ended. I blow through the rest of my presentation ending it by shouting: “Make it beautiful. Make is Usable!” I had a great time and reconnected with old friends and even made some new ones.

Open Source was created as a way for the OU community to come together and talk about all things webby. The idea was to have an open forum where anyone (not just computer nerds) could ask about web development, interactive design, or just show off the coolest new social media site they are using.

open source

The speech bubble is a symbol for talking, or sharing ideas. In retrospect, i should have integrated several speech bubbles in infer collaboration and dialog between several folks at once. Ill put that on my to-do list. The speech bubble is a bit overused these days (i made this about a year and a half ago, so I think I am a trendsetter!)

In the tech world, the main idea of “open source” is simply a collaboration working together and sharing ideas for the good of a common goal. In this case, “open source” refers to a couple things. 1) We are a group that collaborates about all things web. 2) Our common goal is the improvement of OU’s web. I think it communicates well and looks webby.

I am designing the College of Architectures Web-site and they didn’t have a wordmark or logo that would work on the web, so i whipped up a slick new wordmark for them.

college of architecture, university of oklahoma

I used condensed Neutraface, which in this case, actually has some significance since it was designed by architect Richard Neutra. I usually just use Neutra because i think it looks wicked.

I used a subtle inner shadow to mimic a letter press effect, added lines behind the type to push the drafting/architectural feel and added a slight gradient going from light to dark, top to bottom. The entire wordmark feels very stable and modern while maintaining a slick web appearance. The wordmark works well with the college of architecture site mock-up, I think they will be pleased!

Ill share more logos soon.

When I found out that Mastodon, Converge AND High on Fire were going to perform on the same night at the same show? Well, lets just say i needed to change my underwear.

Doors opened at 6 so Erin, Shane and I got there at 6:30. Parking was fine but the will call line was 15 minutes long… 500 feet away from the actual theater and I hear High on Fire’s Waste of Tiamat nearly tearing the place down. Needless to say I was not very happy about the line at will call. Once we got seated, High on Fire played a few more song and were done. We should have arrived earlier, lesson learned.

High on Fire on stage, and on my new t-shirt.

Speaking of seating, the thing I love about the Brady Theater is the seating. It undoubtedly has to do with my old age, but I love watching shows from the balcony. Granted, I felt slightly un-metal watching a metal show from the balcony, but at least I saw the show.

Converge took the stage next and I was pleasantly surprised by their energy. Liz let me have* Jane Doe by Converge, and while i appreciate their powerful, sometimes awkwardly timed tunes, im not really a fan of the vocal delivery. BUT i loved the way Jacob Bannon commanded the stage. It was pure Iggy.

Mastodon was next. Of course, they destroyed. I saw them on their tour for Blood Mountain and they were awesome, but this time they up’d the ante. There was a huge video screen which showed kitschy horror films inspired by Satan mashed-up with Mastodons album cover graphics. It was very tool-esque. Mastodon played their newest release, Crack the Skye, from cover to cover. It was amazing. For their encore, they played one song from each of their previous albums going back in chronological order and the on screen graphics changed depending on the album. The Devil is indeed in the details.

The Mighty Mastodon

Deathklok wrapped up the night with a blistering hour and a half set. The video screen showed parts of the Metalocolypse T.V. series and some songs even synced up with the live music. It was cool to look up at the screen and see the Nathan Explosion growling while hearing the songs played live.

Great night from the balcony. I love you Metal.

-mario

*by “have” I mean: Let me listen to and gave me a great recommendation on where to purchase the album so the record company was able to get its money.

Hysterical laughter? CHECK!

On more than one religious/alcohol-infused furor Liz and I have made a blood pact that if trail of dead comes anywhere near, we are going to see them no matter what! I’m not going to sit here and pretend …and you will know us by the trail of dead was not good live… they were GODDAMN AMAZING!

I have never seen a band with so much live energy. The Austin bunch took the stage by storm and from start to finish assaulted my heart and eardrums with a beautiful mix of old and new tunes. Being, of course, in the front row I had the pleasure of seeing the guys up close. This came with a price, i have a knot on my forehead from a mic stand, guitar… or pumpkin. Mid-set, out of nowhere, Jason brings a jack-o-lantern onto stage and after wearing it on his head, hurls it into the crowd. Smashed pumpkin bits traveled back and fourth for the remainder of the show.

As an added bonus, …and you will know us by the trail of dead’s merch table was wicked as well! $5 trail of dead shirts? YEP! I also got an original print by Conrad Keely. Aside from being the frontman for trail of the dead, Conrad is also an insane draftsman. His artwork is amazing and he works in blue ballpoint pen! Fanboy, I know…

Conrad Keely

The opening act was a nice surprise too. Future of the Left reminded me of old school English punk rock, but instead of being sloppy, their punchy, heavy and downright catchy riffs had everyone’s heads nodding. The lead vocalist delivered with Rollins(Black Flag) like intensity. I went to buy their two albums the next day, but someone beat me to the punch! I’ve got them on order though.

What a night! Its was most definitely one of the best nights of music-going in my life.

It uses the same layout and most of the same design elements as the new ou.edu, with a secondary color palette. Since the search is closely associated with the OU home page, we thought it was important to share a similar layout.

I think the layout is intuitive. the tabs allow an easy way to get you in the right place. When the data is displayed, the alternating row colors break up the information into nice digestible byte-sized chunks (HA! get it? byte…)

Speaking of Data, the new search has some strange things going on that I know can be more intuitive. There are some basic issues that we will resolve in the next release.

This is a perfect example of how the Data and Design need to be solid to create usability harmony. For example, the phone numbers listed are 4 digits. Anyone know what happens when you dial only 4 digits?

…

..

.

NOTHING! absolutely nothing…

Most of the OU Faculty and Staff know that the 4 digit number needs to have a “325″ in front of it, so it works. The rest of the folks in the world just think there is some new 4 digit phone number system in place at OU… We have plans to put “All numbers begin with {325} unless otherwise listed.” on the page but wouldnt it be easiler to list the entire number? Good example of how data can kill usabilty.

There are a few minor tweaks that need to happen, but I think it is a huge step in the right direction. Im going to begin work on oZONE, the new ou student portal! So, ill have a lot to talk about when that is done

After 4 months of design and development a new www.ou.edu is about to launch.

Since we actually have some kickass content like a great YouTube channel, Facebook Fan Page and a Blog,  we took a more modular approach letting the content be at the center of attention.  We still kept a traditional feel by using campus images, texture up top and serif type for the headers. Some things that I originally spec’d out didn’t make it into this version, like pulling in the weather conditions, RSS feeds and the Article page functionality, but we will be working to impliment those things in the future.

Overall it’s a great step in a new direction. I could not be more proud!