Archive for category Design

The Thoughts Behind the Decisions

Welcome to the new creativefriday.com. This site was a challenge for me because it was so personal. They say you never get a second chance to make a first impression and that’s as true as anything I’ve ever heard. I knew that I had to make a statement. But I lost my focus and I was abandoning my own method for creating meaningful user experiences. My goals fluctuated and my designs ranged from energetic to intricate to simple. I wasn’t starting from the very beginning and that lead to failure after failure. During this time I was working for clients and choosing to be very methodical for them. Why I wasn’t doing this for myself is a mystery to me. Thankfully something snapped and I realized that I needed to treat my site as I would any client’s. I needed to identify my audience and understand my requirements. This site design and layout were carefully thought out to provide the simplest user experience possible.

The Requirements

The most important requirement for me was getting my portfolio online. Many of the clients I’ve done work for the past few months have been through word of mouth. That’s probably the best way to get a client because you’re already starting out with a recommendation by the person who told the client about you in the first place. But for all of those freelance and consulting positions I was seeing online I knew I had to have a professional looking site and portfolio before they would even consider talking to me.

I wanted a site that was more dynamic than the sites I’ve had in the past. Not just a blog but other information streaming in as well. I wanted to try and show the whole picture of who I am. If a person reads my blog, sees the kinds of articles I’m reading, and follows me on social sites then they are going to get a much better understanding about the kind of person I am and what really drives me in web design. This overall picture was important to me.

And on the list of “wants” was to use some javascript to give the site some interactive appeal. I’m not trying to make my site “sticky” or anything like that. I just wanted to be able to provide an interesting way to view my information without forcing the user to click through a complex navigation scheme. Javascript would allow me to provide a much more simple user interface.

My Audience

According to Google Analytics, I don’t have an audience. I suppose that’s to be expected when my focus hasn’t been very clear. So I had to put some thought into this. I couldn’t try and create a site for the audience I wanted to have but for the audience I was probably going to have. When I looked at my site from a visitor’s perspective I could see only one of two reasons a person would visit creativefriday.com; 1) they were here to read an article I wrote or 2) they were a potential client here to review my portfolio. Everything else would have to be secondary.

The Complex Simple Solution

I read such a great article by John Gruber titled Ronco Spray-On Usability a few months ago. If you haven’t read it I would highly recommend it, especially if you find it difficult to understand why the world needs usability experts. But the gist of it, the essence of the article, is that simple is difficult to achieve. When you nail simple and you got it right, most people don’t even notice because it’s simple and easy to use and gets out of their way. It’s kind of a thankless task. Get it wrong and people hate you, get it right and no one notices.

When I first started thinking about my requirements and my audience I had come up with a fairly simple navigation scheme; Home, Blog, Portfolio, Social, and About Me. When I looked at that solution it seemed like it would probably work. Especially since that’s a common theme throughout the web. But as I was creating my site map and then the wireframe I started to see that there was a problem. There were just too many clicks for a person that was here to either read a blog post or view my portfolio. Those other tabs would likely fall into the ether never to be heard from again. The answer had to be simpler. But when I set up the very simple navigation Blog and Portfolio, I thought that some of my requirements were going to get lost. And then I looked at jQuery for a client project and while working on their site realized that this could be the answer for my site. Once I got the expandable footer element working with jQuery I knew I had solved the problem.

An Agile Approach, A Work in Progress

This site is meeting all of my needs right now, as it is. But I do have additional elements I would like to add. Without the need to make any changes to the main navigation I am going to add a “Hire Me” page with my schedule and a form. I would also like to create a breadcrumb at the top of each page. Search isn’t here now because there’s barely any content to search for but I would like to add search and a search results page. These things can all be built later using the Agile Software Development approach. The site was structured in a way that would allow me to add the necessary pieces later without altering the look and feel of what you see today.

All in all, I’m very happy with the end result. At least for now anyway.

No Comments

OK. So I Was Wrong.

I really thought I was onto something when I decided to move away from the traditional site and broadcast my content. I also thought Tumblr would be an acceptable replacement for the traditional blog. But I was wrong.

I have few visitors and very few comments but I still miss the opportunity for debate. But the only way for someone to disagree with me was to take the time to write me via email or Twitter. And no one else would know that someone else had something to say and that made the content even less compelling. My content was all over the board since I could just share everything I read or saw on Tumblr. If anyone was subscribed to my feed for a specific article I’d written in the past then they would have been disappointed with what I was sharing. I need to focus.

This blog is going to be about web design, information architecture, usability, and the overall web trends that are happening. Every time I write a new post I will ask myself if it fits within those topics. If it doesn’t then I’ll use Tumblr. I will be creating my own custom theme and I will try to populate some of my tweets and tumbles here. But this site is going to be dedicated to the progression of my craft.

1 Comment

Google Reader for iPhone: A Step Backward

Google announced yesterday that they have a new version optimized for the iPhone and MobileSafari. They mention that the new version is better for the iPhone than their standard mobile version in that it utilizes javascript to do more from one view. “Starring, sharing, and keeping unread are done in place, so you never have to leave the list view or refresh the page.”

I think that all sounds well and good. But the truth is that the mobile version was actually better because it wrapped the original article in javascript and stripped out everything but the text and pertinent graphics. This was useful on EDGE and made it easy to keep up with my RSS feeds while away from my computer. I’ve been happily using the mobile version since I bought my iPhone almost a year ago and I wasn’t even asking for a change. The mobile version was such a great iPhone application. You just got the text, perfectly presented in your browser.

My biggest gripe about the new version is that they actually took features away. The mobile version has a Settings link that allows you to “Reformat linked web pages for mobile browsers.” You can turn that on or off as you see fit. I could choose to display 5, 10, or 20 articles at a time on the old version. The new iPhone version doesn’t even give you settings at all.

On both versions, there are 2 links at the bottom of your feed list: “Load More” and “Mark These Items as Read.” On the mobile version these links are stacked on top of one another and take up the same amount of screen space. Clicking either link is easy. But on the iPhone version the “Load More” link is left-aligned and significantly larger than the “Mark These Items as Read” link which is right justified. The first time I tried to click the mark-as-read link I actually clicked the load more link because that link spans the width of the iPhone’s screen. It’s awesome that they do that so I don’t have to be so specific with my touch but the mark items as read link doesn’t span the width of the iPhone and you must be very specific with your touch on that link. And the space it takes up is so much smaller than the load more link that it’s too easy to accidentaly touch the load more link.

Obviously the iPhone version is still in beta and these things can be easily fixed. But I wish more developers would remember that it’s never a good user experience to take features away (unless it’s proven that the feature is little-used and gets in the way of completing tasks). You should start with you already have and then add functionality to improve the user experience. I just hope they add those settings back. I won’t be able to use the iPhone-specific version until they do. Luckily for me, the mobile version was already an awesome iPhone app to begin with.

No Comments

Talk About Bad Information Design

I went to ESPN to check out who won tonight’s men’s college basketball championship and I was led to this page where I was greeted with the graphic below.

I understand that both school’s primary color is a shade of blue. But it should have been instantly recognizable to the person creating this graphic that the 2 shades of blue were much, much too close together for this chart to be meaningful. My first thought would be to add each school’s secondary color and make each line thicker so the user could quickly see the difference between the blue/yellow line and the blue/white line. But the chart doesn’t only fail in its color presentation. It also crams a lot of data into a small column while keeping detail off of the chart. In order to get more detail the user needs to hover over the graphic which they would only know to do if they hovered over the graphic by chance. In this regard I think of the words of the great Edward Tufte when he says “to add clarity, add detail.”

No Comments

Design Approach for Desktop and iPhone Applications

Craig Hockenberry notes:

It takes several months of actual iPhone development before you eventually realize that the iPhone requires a completely different mindset. Until that happens, you’ll make assumptions based on desktop experience, and that in turn will lead to a lot of bad designs.

This sounds a lot like what I just wrote about the move from print to web design. People know what they know and until they experience something different, they’ll try to shoe-horn what they know into something else, even though it doesn’t work. I think a few developers will nail their applications for the iPhone. But I also think there will be more useless applications for the iPhone when the App Store launches. It’ll probably be a while before it’s full of really useful, iPhone-only applications. Anyone that trys to simply “port” their application to the iPhone will probably fail.

No Comments