Jan
31

How to instantly improve the UX of your design

My friend, Thomas Bishop, posted the other day what is the single best piece of UX advice you have ever gotten.

This question got me thinking about the feedback I have received over the years as well as the feedback I have frequently given.

Some obvious UX best practices come to mind, but the feedback I kept coming back to as being consistently overlooked is the necessity to walk through and present your design.

For young designers, I get why this creates anxiety and is often avoided. After you slave over every pixel, the last thing you want to open yourself up to is someone telling you to make changes. Here is the problem: by not presenting and explaining your efforts you are dramatically increasing the likelihood that they will, in fact, make changes.

“But it looks cool! I shouldn’t need to explain it” is the quickest way to have a design dismissed. I have seen plenty of moments where a design would have survived a review, whether by peer or client, had the designer prepared to present their work. Putting the design up for review without explanation does a disservice to all the different permutations that went through your mind during creation.

A foundational yet simple design presentation from a UX standpoint answers three questions for me:

1. Who do we expect to come to this page?

2. What do they want to accomplish?

3. What do we want them to accomplish?

When I say “Who” I do not think there is a need for an ultra detailed persona report. I just want you to level set on whether we are on the same page for the type of user that would be using the design we are talking about. Is it your parents or your sibling in high school?

When we talk about “what they want,” here is where empathy for user comes in. Have we considered what the critical path is for the end user? Are we creating a bunch of hoops for the user to jump through because it looks cool? Focus on making sure whatever the top goals are for our “who” that you explained that you accounted for that.

Lastly, what do “we want” to happen. Presenting how you are keeping the business objectives in mind is key to getting your work approved. “We” make money when ______ happens, so here is how I have considered that in my design.

Thinking through these questions will inherently make your design better. You’ll start thinking through the reasoning of your decisions as you are working and in turn, will give you more confidence. I tend to keep a notepad open for each design, gives me a space to think through anything I want to remember about why I decided to lay something out in a certain way.

Something else to consider is I have used “we” a lot in the above. I think it is important to remember as a designer that everything you do is a collaboration. You need users to use your design. So you should be open to the “we” in explaining your design. It helps you think through the usage of your design, we all want you to be successful.

Presenting your design will make all the difference in the world in how great it looks.

 

This was originally posted on Medium

May
08

New Camera = Fun

I have been wanting to get a DSLR for a long time but they were just too expensive, in the last couple years Canon and Nikon have introduced relatively in expensive dslr’s so I tried to save some more money and buy it off eBay 🙂 I decided on getting a Nikon D60 but instead of buying the kit which included the camera body and lens I bought just the body and then separately bought a lens. I did this because I like taking close up photos (macro) but I also love being able capture a scene so having a wide angle is important. I bought a 18-200mm lens which gives me a really wide angle for regular shots and really great zoom for shots that I need to get close on, it is generally consider a very good all-in-one lens. The kit lens is a good wide angle lens so having one lens that does both was what I was going for.

So I have only really used it twice and here are the two separate sets from Flickr, you get to see wide angle and close up 🙂

Oct
10

Hone your Blackjack skills on your iPhone – 21 Pro

Winner Winner Chicken Dinner
Winner Winner Chicken Dinner

A couple years ago I went to vegas for New Years and I had the privileged of learning how to play BlackJack properly from my good friend Don, who happens to run a great vegas blog.

Now I like BlackJack but there has not been a convenient way to practice, until now. Apple has a fantastic app store for the iPhone/iPod Touch and one of the free apps is 21 Pro. I had been searching for an app and tried a couple out, 21 Pro is the way to go. This is the simple convenient way I had been looking for.

Besides the basics of betting and giving you two cards the game also has game history, built in card counting that follows your game, and a cheat card in case you need to brush up on strategy.

I get to practice Don’s Hedge Ecomonics on my phone, it doesn’t cost me a penny, and I can make sure I practice not spliting 10s. All in all it is a great app, It doesn’t let you play multiple hands at the table but that is me being nit-picky. Lucky for me I get to put my practice to good use, 7 nights in the caribbean, won’t be free but hopefully I’ll have a better chance at the tables now!

Sep
11

The Miami Dolphins hate iPhone owners

I zoomed in so you can see what I see
I zoomed in so you can see what I see

I’m often surprised by high profile sites that get a ton of traffic but don’t try to accommodate as many users as possible. I recently went on a trip and as we were traveling my friend tried to look at the Miami Dolphins website on his iPhone for a schedule.

As you can see to the right the Fins site on his phone isn’t the most helpful thing in the world. Flash is not yet supported on the iPhone so what do the good o’le Fins tell us… Get Flash… but we can’t. FAIL.

So here are two things the Miami Dolphins can do to make sure their website doesn’t stink as much as they did last year.

1) Continue to use a JS script to serve up alternate content, but PUT ALTERNATE CONTENT… Give me a link to the main site at least… only problem is when you go to the main site the site navigation is also in flash.

2) Now the first solution will help a lot but you could always check to see if the user was coming to the site with a nonstandard device like the iPhone for example. Easiest way is to use a conditional statement in your programming language of choice and check to see if the HTTP_USER_AGENT contains the word iPhone. Once you know that you can server up very targeted content. Like what is the address of the stadium, what time is the game, or what is the score of the game…. all things a user viewing your website from a mobile device might be interested in. Here is a link to learn more on some basic designing for the iPhone tricks.

NY Gaints site on the iPhone
NY Gaints site on the iPhone

Bonus Tip

If you are a developer and want to know what your site looks like on the iPhone and you don’t happen to own an iPhone there is two things you will need. 1) An Intel based Apple computer 2) iPhone SDK (Free)

Once you get those two you can look at your site on the iPhone Simulator provided with the SDK. Doesn’t the Gaints site look nice… get with it Fins.

Sep
07

Why would a designer need to use Subversion ?

Lots of things going on in my life lately and the blog was put on the back burner but nevertheless a friend asked me for an explanation of a technology which inspired me to post (which I plan on doing more of).

I was asked by a designer friend recently if I had heard of Subversion and if I thought it was useful. He had read some things about it and didn’t get the point of it.  I am by no means an expert but my former company was using it and I’m currently using it at the office so I shared my experience. I’ll bold key Subversion (SVN) terms throughout the article so the lingo gets included as well.

I will say that Subversion is not new, it has been around for a number of years but I think this post might be important to either new designers or maybe designers that avoided subversion in the past because it seemed more of a programmer’s thing.

At the end of the day SVN is like having a remote server (Repository) that you store your text based files ( html, css, js, php, as, etc) and every time you store (make a Commit) them to the repository it stores the changes in the file as individual snapshots (Revisions). 

When you start a project in svn you usually build the repository and import any existing files you have ( so if you have your sliced images and folder structure you would bring that in). Then on your local computer you setup a working directory, this is where SVN will monitor changes. So you can make changes in this directory ( I use a subdirectory in my localhost) and edit the files with Coda or DW or whatever you fancy.

Now in the past you had to have SVN running on a server and it had to be setup properly, I could see how this probably turned most designers off. Now there are a couple of Hosted SVN systems, I use Beanstalk but there are a few others SpringloopsGoogle Code and Warehouse these make setting up a repository a breeze. 

So for an example you and a colleague are working on a WordPress theme or a new client site but you are nearing the end of the dev cycle and both have the CSS file(s) open making changes for different parts of the project. What SVN prevents is you overwriting their changes while helping you merge your changes all the while keeping a history of each file.

So you make the changes and try to commit to the repository you will get a conflict, as I said I use Beanstalkapp.com as the repository, Versions for my SVN client, and an app called Changes to merge conflicts. Changes will help you view the file in the repository and your working copy side by side and pull from the left or right to resolve the conflict. My app choices are based on me using OS X, but at the end of this post I mention some Windows based tools that work just as well. It should be noted that Beanstalk is OS independent, you simply connect to it with your SVN client.

Now say for example you are working on a huge app with a ton of people and you are about to push it live when you look at the latest build you have an error, if the error is not easily identifiable you can roll a whole repository back to a certain revision or even individual files. Another thing that also pretty cool, is you can branch your app out. Which basically mean you have a version you are happy with and you want to keep making small changes with it but you are ready to move on to phase two of the project. You would branch out the original to preserve it and you can work on the other branch.

So Beanstalk stores the revisions… Versions Commits/Updates the repository… and Changes helps clear any conflicts

In Versions and in SVN for that matter there are a few basic terms to understand Update, Commit, Conflict, Add and Resolve.

Update this one for me was a little tricky to understand but when you update you are downloading all the files that have changed since the last time you grabbed them.

Commit is where you would upload the changes you have made, when you setup the working copy it will know what has changed so you don’t even have to remember all the files you modified.

Conflict is basically where you made a change and your colleague did as well, they committed to the repository and when you went to commit it said you were about to overwrite his changes.

Add, say you add a new image during your dev process the repository doesn’t know to watch that file for changes so you need to Add the file to the respository so it physically adds it but also it knows to watch it now.

Resolve is what you would click after you have cleared up a conflict, some SVN clients won’t let you commit without all the files being resolved.

If you are looking to get your feet wet try the apps I mentioned they all have trials. If you want to try SVN on a PC a good subversion client is TortoiseSVN and for a File Compare app on the PC try WinMerge.

There is something else that I have heard is better than SVN called GIT. I haven’t played with it enough yet to know if it is good for web development, I’ll be sure to update this post once I have given it a run through.

Hope this helps, SVN is pretty simple to pick up once you start using it and I think the revision history it provides is indispensable.

May
21

Web 2.0 – Data Aggregation Part II geoTagging

First the definition: Geotagging, sometimes referred to as Geocoding, is the process of adding geographical identification metadata to various media such as websites, RSS feeds, or images and is a form of geospatial metadata.

Basically it is adding Latitude and Longitude to an object, so if you search for information based on a location you can find relevant objects.

I have to say I love this type of stuff, for my senior project at The U myself and two classmates wrote a script that pulled your current position from a GPS receiver and sent it through a cell phone to a database. Then through a flash app we displayed your current position on a map with your heading and speed. I actually still have it online, projectgps.com click GIS, now be easy on me this is back in 2003.

Fast forward to today and Google is slowly but surely making my vision come true. One of the cooler things we did back then is we had a database of locations and their geotag, as we tested it we could see the distance from a location our friend was. Today I notice that google is pulling Geotagged photos based on areas that I’m looking at on a map.

My wife and I were thinking of taking a road trip for our day off on Monday. While I was looking up locations I opened up Google Maps and went to a lake with in driving distance. There was a new button I had not noticed before called “More”, under that is a check box for photos, when I clicked that BOOM a ton of photos from the exact location they were taken. I could now see exactly what real people see at different locations, not a brochure but the actual photos.

So as I was looking at this I was wondering how Flickr’s own geo tagging was going. Flickr was one of the first large website to incorporate geo tagging but since I don’t use Flickr for mapping it is not something i had checked out in a while. I have to say the quality of photos on Flickr are a lot better than the ones google is pulling in.

It is really cool to see the highquality professional photos for different locations from different photographers.However, major Fail on Yahoo for not having Flickr photos showing up on Yahoo Maps. They own Flickr, they should have it done already.

Now I really think the tipping point is going to come soon and I think that will be iPhone 2.0, the jesus phone. I’m really looking forward to the new version of the jesus phone because it should have a pretty good camera and there is rumored gps functionality. That combined with the SDK, I think there are going to be some really great geo tag applications. I would love to see an app that takes your position relative to a location and shows you information, whether it is coupons or events but I see a ton of possibilities to having your live position and an internet connection.

May
05

Web 2.0 – Data Aggregation

Trying to define Web 2.0 is all the rage these days, some people say it is social networking others say it is about interactivity (AJAX). At the end of the day all the definitions are right because the whole point of a new version is the fact that it is new, so defining it as stuff we didn’t do in the 1.0 days is good enough for me. With that being said there are a couple things I’m excited about and they all tend to center around data aggregation. Now aggregation in general can apply to a lot of different things happening on the web, RSS for example is a simple way to help you aggregate your favorite authors or news sources.

Google and Microsoft for example are now aggregating traffic information, they are both using the information in similar ways but with just slightly different twists.

In Google’s case they take the traffic information and let you see what traffic is like on certain days.

Tomorrow I have to head to the airport around 2 o’clock, with this new functionality I can see what the traffic might be like around that time. Now they can’t predict accidents but I like the fact that if I’m in an unfamiliar city with a meeting the next day, I will be able to determine loosely what the traffic might be like.

I say that is pretty cool and some functionality that I’m sure a lot of people that travel will find useful.

Now Microsoft has taken this information and put a slight twist on it. What they do is when you ask for driving directions you can choose for them to factor in live traffic information. So if you are running out the door and are printing out directions it might be able to save you a big headache if it helps you avoid an accident. Now on the flip side of that is the fact that the piece of paper you print out is not magically going to update when you are on the road so if you print out the data the night before and are factoring in live traffic it isn’t going to help you the next day.

Obviously nothing substitutes having gps in the car with a live traffic feed but for you all out there not lucky enough to have that or are not psychic maybe a mix of what Google and Microsoft are doing will help you out. I’m sure ultimately they will start blending functionality so what Google has Microsoft will and vice versa.

Another great example of aggregation is a site called farecast.com, I have been using them for a couple years and it is a great free service. So good that Microsoft bought them a few weeks ago. Here is the cool part about farecast, it will tell you if you are getting a good deal or not. Now you can surf around the net and look for the best deal, you can even use a service like kayak that aggregates a whole bunch of sites together but farecast has a twist. Farecast will study historical trends for the route you are flying and will predict with sometimes fairly hight accuracy if you should wait to buy your ticket or if you should get it right away because the fare is only going to go higher.

For example I flew to Seattle this past March and I knew about the trip a couple month ahead of time, I was able to save a bunch on the ticket because farecast told me to wait. It felt based on the trends that the price will start to decline now I followed the advice and sure enough it went down almost a hundred dollars a fee weeks before the trip.

All of these are great examples of the impact websites can have on our day to day life by helping aggregate and mine all the data that is out there.

Apr
15

Is it football season yet?

I can’t wait for football season, college or pro. Today I came home to a package at the front door and to my surprise it was my 2007 Fantasy Football Championship tshirt. ummm, Yes Correct! We have a big time fantasy football league at 352 Media, last year I think we had 20 teams. We split the teams into two leagues and I got lucky and won my league.

Now I need to defend my title so I have a couple suggestions for Yahoo, who provides some top notch service for our league.

First, provide a way for guests to view the league. Since we have two leagues it would be nice to see how my friends are doing in the other league. I think that should be an easy thing to setup, just an admin setting to make the league public or private.

Second, along the same lines as the first request make a widget or some embed code that we can include on our blogs or sites so show people how we are doing in our league. Not that the growth of Fantasy Football is slowing but the more exposure the better.

Third, take your live stats tracker to the next level. Put it in Adobe AIR or Microsoft Silverlight I would love a basic desktop app for my stats. Add some better play by play for all the games, god knows if I could watch every game at the same time I would try to. Since I can’t, my live stats let me know how my team is doing. Add some sound or something when I score. Form a deal with NFL.com to put highlights of my players. Add live chat to the league members through the app, many of us are in different parts of the country so we can give each other updates for the games they are able to see. It is simple, I just want it to be cool.

Hopefully we will get to see some of these features here next season, truth be told Yahoo does a great job doing updates and every year they are making improvements.

Defend the Championship!