In a few short months, it is rumored that T-Mobile will be releasing the first Google Android-based phone. The HTC Dream. And while open-source fans may be rejoicing, here are some reasons why Android will only be competing with Windows Mobile OS and not helping to deliver the next iPhone.

The Dream = The Fail

While I applaud Google for creating a multi-phone OS, I have to wonder what T-Mobile and Google combined are thinking by releasing Android’s debut in the form of a SideKick-type device? Honestly…the HTC “Dream” looks more like a hallucination. It won’t be that slim, it will be cumbersome, and I just can’t believe they would mar initial public impressions of Android with a device that looks 3 years old.

The Public Wants Flashy

You can say that looks aren’t everything and that a non-touch screen keyboard may be nice, but let’s be honest. It won’t gain massive public appeal because it’s not offering anything “shiny” or that isn’t already in the marketplace (talking at large).

Remember: The general public is fickle. They want status and they want emotions sold to them, not functionality in a wonky looking device (those people are called baby boomers…and they don’t wait in lines for 7 hours).

Given, it has only been about a week or so since the FCC approved the HTC Dream for T-Mobile, but with about 2 months until launch, why no word on their sites? Why no word from T-Mobile? To market a product you want anticipation for, you have to create the anticipation. Show something that people need to have. Give me a reason to not buy an iPhone or a SideKick now.

Sadly…they haven’t started down that road, I believe T-Mobile is counting on Google for this. Now in comparison you can say that’s what Apple and AT&T did. You’re right, it was. But Apple was selling the phones. And they sold more than AT&T did. They created the anticipation. Google isn’t selling Android, T-Mobile will be. They need to start selling it to my eyes and brain. Make me need it already.

Continue For More…

Having a good site design and content that people enjoy is important. Even more important are the subtleties of your site. A handful of minor details that can add up to make a big impact…in your favor or against it.

Subtleties are how software designers create such great interfaces and products, they’re how famous designers make purses people will pay insane prices for, and they’re probably the reasons behind why you hate or love your car. There are many details to be aware of, but here are a few simple ones that can help you give a pleasant and appealing experience to your users.

Make Your Text Stand Up

Text is what you communicate to the user through. This is why it’s important to have clear and concise text that makes sense to the user within the current context. Let’s look at an example:

Looking at Cork’d, we can see that the text existing on their site (the Good side) is very to the point and attractive, making the user want to join the community. The text on the right side (the Bad side), while clear and concise, lacks any lipstick to make the user want to initiate action.

The text on the right is, unfortunately, text that we see in many cases. This shows how easy it is to tweak your existing text to create a little bit more draw. The basic rule is to give the user a little more than the facts, but not a short-story. This is part of your site’s marketing, don’t assume your developers know how to write properly.

Continue for more…

There seem to be a lot of vague answers behind how to make Mac OS X icons. What programs to use, how to make them correctly, and so on, so here’s an easy tutorial on how to make yourself a Mac OS X icon for free!

Things We’ll Need

Before we start we’ll need a couple of programs. No worries though, they’re all free.

• A graphics program. I’ll be using Adobe Photoshop CS3, but you can use any layer-based graphics program (a great free program for Mac is GIMP).
• Icon Composer. You can get Icon Composer free by downloading Xcode from Apple. You have to sign up as an ADC Member, but again, it’s free. Go here to get it!
• Icns2Icon. Go here for this free handy utility.

Ready? Let’s make some icons!

Read on…

Developing mobile websites is common these days. Devices like the iPhone allow us to have an almost desktop-like experience and devices like the Motorola Razor allow us to get basic information on the go.

In developing these sites, we must be mindful of what we are trying to accomplish with the site, but more importantly, what the user is trying to accomplish with our site in a mobile setting. These 5 tips are helpful reminders and methods to keep your mobile sites user-friendly and task-oriented.

1. The Lowest Common Denominator

Deciding which devices your site will run on is hard. As far back as last year, research showed the iPhone claiming nearly .1% of all internet traffic (including desktop browsers). Even more research showed it claiming almost 28% of the smartphone marketshare in February.

My recommendation? Develop for smart devices first (iPhone, Windows Mobile, etc.) and then, depending on your audience, support lesser browsers with a gracefully degrading presentation of your site. This keeps your advanced users happy and coming back, as well as keeping basic info available for casual mobile users.

2. Don’t Try To Do It All

You know what tasks users perform on your site. You know the pages they visit and the functionality that they need. For your mobile experience, start with the most used features of the site and leave the rest for the desktop.

The most common aspects of mobile sites that I see unused are commenting, ratings, and profiles. This could be due to users logging in to get more personalized information, but when it comes to interaction, if they’re on the go, they’re most likely not interested in contributing to the site at that moment. Keep this in mind when deciding which aspects of your site to take mobile. It can save you unnecessary effort and time.

3. The Environment

The most important aspect to keep in mind when developing a mobile experience is the environment of the user. Where are they? What do they intend to accomplish in that setting? If you’re walking downtown and trying to use a mobile site, the last thing you want is confusing navigation, lengthy pages, or to have to login for some basic information. Many sites forget this when developing their sites though, they imagine someone sitting in a cafe with nothing but time on their hands so that they can navigate a site and (maybe) get what they’re looking for.

This point pulls back in the idea of not trying to do it all on your mobile site. Having a task-oriented mobile site will ensure your users are kept first priority in the experience and it also ensures that they won’t have a hard time finding what they need. If you find that they do need more features, consider what platform they are mainly using and think about creating a native application (Windows .NET, Java, or Cocoa)

4. Mobile Advertising

Do it well or don’t do it at all. Mobile advertising is getting a bigger push as content becomes more and more mobile-centric. Google has announced more solutions for mobile adsense and more advertisers are seeing its use to get someone’s attention on the go. Ok, so mobile ads make money, but do they make sense? Not always…

I believe that in order to have effective mobile ads, the page that clicking on the ad takes you to must support the mobile experience too. I have seen many mobile ads that take you to a normal homepage that is not enhanced for a mobile experience, talk about inefficient. The ad must also act as an incentive for the user, like a coupon for a place they might be close to. To get users wanting to click on ads, we have to offer them something for doing so, not just take them somewhere pushing something new to them. It has to make them want to act.

5. Address The Address

Getting to the mobile version of a site can sometimes be a pain. Is it m.site.com? or www.site.com/m? or www.site.mobi? If you’re only catering to one address, ask yourself why. Ensuring that the user gets to where they want to go is essential and making it that much easier for them to get there is what your philosophy should be.

If your site is running PHP, you can catch the user and re-direct them based on their browser in the htaccess file. Javascripts also can lend this feature to other types of sites. Though as standard, when you set up a mobile site, set up m.site.com, www.site.com/m, and buy a .mobi address for it. It will make sure that however your user is used to getting around mobile sites, they won’t have a problem finding yours! (This also applies to iPhone sites, make it easy for them, set up iphone.site.com and www.site.com/iphone)

Quick + Easy = Great Mobile

Some of these tips may seem obvious, but the point that I’m trying to make is that a lot of times we get overloaded with feature requests for mobile sites and end up trying to do too much with them. People that are on the go need information quickly and remembering that is important and often times forgotten. Making your mobile experiences quick and painless will lead to happier users and help solidify your mobile presence.

Wireframes are an essential part of the project process that many developers tend to leave out. Wireframes can speed up project development times, create more meaningful user testing, and get programmers and designers on the same page. They create a great balance of initial function design and graphic design that gives both design and programming teams something to go off of. If you’re not using wireframes yet, my hope is that after reading this, you will!

Benefits!

By creating wireframes first, you outline the functionality (what has pagination, what happens when you click “this”, etc.) and basic layouts for pages (what goes where). You can easily move elements around and ensure that you’re creating a very usable product, while keeping everyone on the project informed. Let’s look some more at how wireframes can help.

• Users are emotional. Wireframes and prototypes are generally gray or monochromatic in color. This lends itself well to initial user testing. They/You can focus more on actual functionality than users’ reactions to colors, pictures, text, etc. User testing can be hard because people have biased and emotional responses to certain things, this helps alleviate those situations. Wireframes also help you test earlier on in the process. You can see what’s working and what needs some revising before the design is set in stone.
• Designers can make it pretty. This will give your designers a place to start, even if you both decide to move things around, it’s at least a non-blank canvas. Graphic designers typically don’t want to design forms, am I correct? This lets them do what they do best without wondering what needs to happen on the page.
• Programmers can program. Knowing what functionality needs to exist upfront will make your programmers happy and make teamwork easier for them. This allows them to breakdown what/where/when action happens and how to account for it, as well as how best to delegate the work among themselves.

Tools & Resources.

Hopefully you’re thinking, “this is great, how do I start?” Well, the good news and bad news is that there isn’t really a standard for how to draw wireframes. There are however, many people with good ideas and resources to go off of. Let’s start with the programs:

• OmniGraffle Professional - Link. This is by far my favorite. It’s very easy to get up and going with and offers many features that can save you time (manual guides, presentation mode, multi-page HTML export). Another plus is that it’s very easy to get some basic user testing done with it. There is one caveat though, it’s Mac only.
• Microsoft Visio - Link. I’ve used Visio extensively and it’s a great tool as well. It’s been the defacto standard for diagrams for a long time on the PC and a lot of people have continued to carry on with it for wireframing. You won’t get the same presentation modes that OmniGraffle offers, but you will find more stencils and templates available on the web. It’s a toss up, but Visio is PC only.
• Adobe Dreamweaver - Link. Although Dreamweaver isn’t really suited for wireframing, some people use it to easily mockup HTML and get the process going. It’s a good tool, but I think if you are serious about wireframing, you’ll have better luck with one of the two programs listed above. Dreamweaver is available for both PC and Mac.

So now that you have your tool picked out, how about some stencils and templates to get you going…

• Graffletopia is a great site with stencil kits of shapes you can use in OmniGraffle.
• Garrett Dimon has some great templates that you can start working off of, available for OmniGraffle and Visio.
• Yahoo! has an entire stencil set of their UI shapes that you can download. The nice thing about their package is that you can not only get it for OmniGraffle and Visio, but they also offer PNG and SVG versions. Great to hand off to your designers to get everyone on the same page.
• Urlgreyhot also has great stencil kits for Visio and Omnigraffle.

The thing to keep in mind is that not one stencil kit will have all the elements you’re looking for, but a combination of them will get you where you need to be. Anything else you need can be easily drawn.

A Better Start.

Since I’ve started using wireframes to start out projects, there’s been no looking back. They help to get ideas across to other team members, as well as ensure that everyone is on the same page. I’m sure you’ll find that as you move forward using wireframes, projects will get easier to get everyone moving on. There’s no waiting on comps or writing code that may not get used.

Let me know what your experience has been and if you have any tips to pass along!