Sorry, But I’m Indecisive

Sorry again my one reader. I changed my theme again. I think I found one that works better now though. I wanted a theme that wasn’t so stylized that it was hard to read. This theme is pretty straight forward so I think it will be easier to use.

I am currently working on developing a new portfolio for myself, I have been neglecting it for a while. I hope to have it done by the end of the month. The domain of this blog will change, no longer will I be at the mercy of wordpress.com.

Categories: Random Stuff

Photoshop or Illustrator or Fireworks or something else

01/12/2011 1 comment

So I use Photoshop to design websites.

I recently re-listened to Jason Santa Maria’s Big Web Show interview where he talked about why he prefers to use Illustrator over Photoshop and it got me thinking about why I use the tools I use. In the interview he compared Photoshop to a tool box, if you wanted to draw a square, you grab the tool that does that and you draw the square. He compared Illustrator to an open drawing environment like a sketch book, or a canvas, something that allows for a more creative exploration. While I agree with the Illustrator comparison, I don’t fully agree with his Photoshop analogy. I would say Fireworks is the tool box because it is designed more for fast prototyping and quick construction of web elements. Photoshop for me is a mix of both, I think it has the power to bridge the gap between creation and editing. There are probably a lot of reasons why I prefer it to other image editing/creating software products, but my top 3 reason are:

  • I use the layer comps feature all the time
  • Pixel perfect measurements
  • I actually know how to use it

The third reason is probably the biggest reason why I prefer Photoshop over Illustrator or any other program, I just know it better. I guess I just need to man up and design a website in Illustrator. Crash course it. Let me know if I’m missing out a better way to design websites, I’m always down for learning better, more efficient methods.

What image creation program do you prefer… why eh?

Categories: Design

Flash Crashes?? (Best Tool for the Job)

01/04/2011 2 comments

Okay, Flash has never ever, ever crashed on me, not once. So why is it that every Apple lover I know complains of Flash crashing their browser? Is this Stockholm Syndrome? The “Turtleneck” just kidnapped you and you fell deeply in love with him, but you have no reason why… then he took you wallet.

You’re a Tool

Mac, your a tool. Your the best tool I know for web development. Your the best tool I know for design. Your the best tool I know for making most awesome things. But you’re still just a tool, you have your strengths and limitations just like any other tool. Development tools, software and languages all have their purpose. Each one has very specific attributes because not one of them can accomplish every task. Plus, using different tools and languages are a good way to separate task, for example, you’d never use HTML to design because that is what CSS is for. Each tool has its own particular set of skills just like people. So when a powerful company like Apple decides, for no other reason than to make more money, throws another company under the bus by calling one of their most revolutionary products “buggy”, it smacks of ignorance.

The Flash wars have been ginned up by a company who wants to generate more revenue by limiting web app access. Think about it. Apple takes a 30% cut of all the revenue generated from any app and Angry Birds is the number game on iTunes. Angry Birds is basically just a simple Flash game. Flash games are incredibly addictive, we all play them. So what if Angry Birds was just a simple web application that could run on every browser in every platform? The maker of Angry Birds would be 30% richer. Apple isn’t dumb though, by restricting Flash on its mobile platform, Apple gets to claim that 30% because it knows that the success of iPhone is based in its apps. Apps are the best selling point for the iPhone and iTouch, with out them, its just another smart phone with lame Blackberry like apps. If Flash were able to run on the iPhone, then we could all build really sweet games and apps in Flash and keep our 30%.

It’s About Using the Right Tool

I feel like I’m stuck in the middle of a war zone. I use Adobe products all day, my career is dependent on them and for the most part (except Fireworks) each piece of Adobe software is the far and away the leader. There is no other equivalent to Photoshop and in my eyes, there is no other equivalent to Flash (at least not yet). From design stand point, Flash still remains the heavy weight for web animation.  Its awesome for designers because you can easily build clean, fast animations that will run on any browser without being some super Javascript developer.

Despite my feelings with Flash, it does have it’s limitations (and some big ones) and that’s why we have other wonderful tools like jQuery, Scriptaculous, etc. I love using jQuery, it has a lot of power and can do a lot of the same things as Flash, plus, you can still use live text in an image slider or any other animation. But as of today, there are still thing that jQuery can’t do as easily as Flash. Knowing the limitations of each is key to using the best tool for the job.

Its our job as designers to learn and understand what tools we can use for what particular job we are doing. I would never use wire cutters to change my spark plugs, there are better tools for that. The best mechanics know which tools make their jobs easier and more efficient. The same goes for the best designers, they know what tools should be used to create the best product that will meet the client’s needs in the most efficient way. Flash is still widely important to the digital world. Let’s not forget that the innovation of Flash in web development sparked the dynamic web design movement. As Android continues to take over the mobile smart phone movement, Flash will still play a big role because smart app development firms will capitalize on its ability to run Flash.

Choose Wisely

Whatever Apple says, Flash still plays a key role in today’s digital development. It’s not something that will go away anytime soon, despite what all the wannabe turtle neck wearing fan boys say. I think the better choice is not to jump on the “Turtleneck’s” bandwagon, grow up, and then learn to use the best tool for the job. I wonder is Steve Jobs has ever seen Handy Manny?

The great Adobe V Apple war continues…

Categories: Design, Random Stuff

How personal bias effects design

For years and years when someone asked me what music I liked I said, “Everything but country and rap.” A good friend of mine pushed me on my response one day and I finally realized that country and rap music is just another form of art that at that time I did not fully appreciate. I am not longer a punk rock snob, although I don’t listen country on a regular basis, I have a deep appreciation for the art form and its difference to the musical world. I have fallen in love with rap however.

We do the same thing in design, we have all heard it. “That design sucks!” Although most of us designers think we know and understand composition and can critique another works at lightning speed, do we really know why a design is flawed? Or is it just our own bias and perception that influence the way we critique and create design.

Popularity

Popularity, just like in high school, create copycats. Just because Facebook has three-bazillion users doesn’t actually mean that its design and composition is wonderful. I’m sure we can all find just as many wonderful compositional high points as low points (I’d root for more low points however.) Changing your header background color to solid #3B5998 to mimic Facebook will not guarantee the success of your Uncle’s Razor Scooter website.

Popular websites are destructive to the design world, but only for those designers who don’t fully understand why a popular websites design works. Facebook’s design works for many reasons but mostly because it’s form and function dance together very well. As another example, look at Web 2.0 and the rounded corner. When the rounded corner made its splash in the web world, every hip new Web 2.0 site had them, why? Because it was awesome. At the time every designer who wanted to achieve Web 2.0 (without even knowing what Web 2.0 was) would simply just copy the look and feel of a site that had achieved it. In many cases this meant implementing cool CSS tricks like rounded corners. But as more and more designers gave in to their popularity insecurities, the more and more the rounded corner became less meaningful.

Taste

I love corn on the cob, in fact, I don’t eat much corn unless its on the cob. But does this mean that ‘corn off the cob‘ is any less tasty or nutritious? Nope. It all boils down to taste. Some designers swear by dark text on light backgrounds and even work so hard to prove scientifically that it is better than the opposite. But light text on dark backgrounds can be more engaging in most cases. One is not better than the other, they both have their places in the vast world of web composition, but figuring out what compositional elements will taste better can be the hardest thing a designer ever does. The key is find out what taste your user prefers first.

If I have people coming over the house for a BBQ and I know most of them hate hot dogs, would I serve hot dogs to them just because taste wise, I KNEW they were far superior than hamburgers? Probably not, unless I was a jerk right. The point is, design is a matter of taste and one person may love your bright green text borders over your dead black background while others would say it was “stupid”, but what do your core user like? Who are your core users and what do they do on your site?

Utility

Just cause someone owns a truck doesn’t mean they are a construction worker. There is a reason why we design for familiarity but this doesn’t mean that we have to stick to stereotypes. In our minds we have a template for every genre of web design just like we have perceived musical formulas for music. We think that when we see a white background with three columns that is should be an e-commerce site. The utility of the website shouldn’t define the look and feel of it. Innovative, great design in most cases can break the utility convention.

The function of a website should marry with the form of a website, not dictate its look. This comes back to our user once again. What does our user prefer, or what will our user like? If you are creating a blog for a client, you’ll want to stick with the conventional elements of a blog, like having a sidebar with categories listing and tag indicators. These elements tell your users that they in fact reading a blog, but this doesn’t mean you have to use the formulaic two column layout with a large title header.

Closing Argument

Ironically, the websites that replicate every bias we have as designers are our wonderful design blogs we love to waste most of our days reading. Design blogs have been victim to popularity, taste and utility. Smashing Magazine is the QB of our all-state high school football team and then rest of us would really love to have the success that they have enjoyed. But the real brilliance of Smashing is its innovation. It was one of the first design blogs to really brand itself.

As designers we need to be making the interwebs better, not worse, that means trying out best to be innovative. When we are tempted to copy we need to smack our selves in the face and wake up, we need to not force feed our users designs that we think are great and next time you are working on an e-commerce project, add some freaking color!


If you liked this article, do me a favor and re-tweet it…

Categories: Design Tags: , ,

UX Case Study: My Antique Slot Machine

12/05/2010 1 comment

When I was a kid, my Grandpa bought a couple of 1948 antique slot machines made by the Mill Novelty company. One was a quarter machine and the other was built for dimes. Every Sunday we went to Grandpa and Grandma’s house for a visit and Grandpa would always give each grand kid a roll of quarters and dimes so that we could play the slot machines. One Sunday, after spending all my dimes and quarters on the slots, I had a good idea. There was a keyhole on the back of the machine where you could take the back off and get the money out of the machine. Learning how to open locks with a bobbie-pin from the movies, I shoved a bobbie-pin in the lock on the back and broke it off, jamming the lock and rendering the antique machine useless. After a long talk from my Dad, a lot of tears and a locksmith, the machine was eventually fixed.

Before my Grandpa passed away, he gave me that old 10 cent antique slot machine because of my attempt at Casino robbery. I now have the key and can play it anytime I want. It still works great and occasionally I get a big win, but ever since I was a little kid I have never hit the jackpot, unless you count inheriting the machine itself.

Playing this Mills antique machine the other day I realized something. For being a simple machine, it has a great user experience. Through a couple of simple inputs and outputs, it manages to create anticipation, amusement, pressure, addiction and even anxiety. All the things I experienced when I was a kid that made me want to break into the back of the machine. This machine, with its very complex, mechanical inter-workings has a very simple user interface that entices and intrigues the user keeping them coming back for more.

This machine is perfect for a website/app analogy don’t you think!

The Backend

When you take the back off the machine (using the key preferably) you reveal a very complex mechanical system that blows the game Mouse Trap out of the water. Its pretty scary and amazing to look at, much like viewing the backend code of a piece of software or website.

Functions

The mechanics of the slot machine are a series of functions that build upon each other and work together when a dime is inserted and the user pulls the handle. Watching the machine process a dime with the back open is pretty interesting to watch. Before the lever is pulled, the machine must check to see if a dime has been inserted, if there is a dime present, the machine will unlock the lever for the user. After the lever is pulled a series of functions are called and executed, each function is started either by the initial pull or by the completion of another function.

These mechanical functions include:

  • Slide dime(s) down the coin slot to the collection box OR the jack pot container
  • Start spinning the all spindles
  • Stop each spindle randomly one at a time from left to right
  • Stop all spindles
  • Calculate results
  • Pay out appropriate amount of money
  • Lock lever

Along with these basic functions, there are more safety feature functions, adjustment functions and a variety of other mechanical logic functions. All these functions must work together to accomplish the machine’s task (stealing your money). This is the equivalent of scripting functions on a website by which the website processes how the user interacts with it and how the website dynamically displays information for the user.

The Frontend

The outer shell of the slot machine serves not only as a cover to disguise the complex functions that hide inside, they also make the machine appealing and inviting for the user. This is where the user gets to interface with the many moving components on the inside. This is where the user gets to experience its magic and wonder.

Structure

The over all, compact structure of the slot machine is built on a wooden foundation. All the components are contained, or wrapped inside four steel walls. These steel walls serve to keep all the parts and pieces together as well as the foundational structure of the user input, output and display components like the dime receptacle, the lever, the output slot and the spindle display windows.

The structure of the slot machine is much like the structure of a website, the HTML and CSS. The mark-up code of a website serves as the structure of the website, its determines the layout of smaller structures, the position of components and the location of user devices. The HTML and CSS should be a simple structure that props up the website and holds and hides its inter-workings. It allows the user the interact with the complex functions on the inside without having to display its functions.

Design

The main purpose of the slot machine is to make money right? To do this, the machine can’t just be a big steel box sitting on a simple piece of wood. It needs to attract the potential users and then keep them there playing for hours until all their money is gone. That’s where the sweet cherry burst design, bright colors, user friendly shape, ergonomic user inputs and spinning fruit symbols come into play. This is the skin or graphic display of a website.

The main purpose of a website is to make money right? Just like the slot machine, a website can’t just be a white screen with blue underlined links and black Times New Roman text, it also needs to attract and keep the user. This is where brilliant color schemes, enticing graphics, well placed user elements and animated displays come into play.

The Experience

Functions, structure and design all come together to create a unique, fun experience for the slot machine user. The user is attracted to the slot machine because the design promises to deliver instant winnings and in some cases big winnings all for the price of a dime. After the user drops a dime in the coin slot they are un-aware of the physical and emotional experience they will have in the next 30 seconds.

The user reaches up, grabs the lever and pulls. They instantly hear the functions fire as metal levers, gears and linkages click and clack together. The dime moves and is displayed for the user under a thin piece of glass. The spindles the hold the fruit graphics start out spinning fast and make a whirling noise that starts to build the anticipation. One at a time each spindle stops instantly revealing a fruit symbol, the slight delay between spindle stops continues to build tension and excitement. After two spindles stop, the user can compare and anticipate what the results will be by referencing the visual description of the different winning combinations on the front of the machine. After the third spindles stops and makes an audible clunking noise, the results are finally revealed and the winnings are then ejected through the machine into the little cup at the bottom. If you don’t win, then the machine just goes silent, its like a little quiet smirk the machine gives you.

Collaboration

With a few more dimes in hand, the user is now hooked on all the noises, movement and excitement the machine has created so they pull the lever a few more times. This user experience is created by seamless collaboration between structure, function and design. The user experience of a website is no different. A successful website or app needs to have a solid structure, fine tuned functions and a beautiful interface. To accomplish this complex task of creating a unique user experience, seamless collaboration between designer, developer and programmer has to occur. User experience goes much deeper than just the simple interaction the user will have. Like the slot machine, the functions, structure and design are all key parts of the experience itself.

Categories: UX Tags: , , ,

I’ve done this before… so stupid

Categories: Random Stuff

You make the decision for me

I am a user as much, if not more, than a designer and a indecisive one at that. I have a hard time making a decision over where I’m going for lunch. Now, I’m  not saying that users are just as indecisive as me, but why not make the important decisions for the user instead of making them decide.

At a recent WordCamp, Matt Mullenweg talked about how WordPress has focused on user centered design and that one key thing in designing for the blogger (user) was to take the important decision making away from the user. He gave many examples of when the crew at WordPress had to make touch decisions on what plugins and features to add to the WordPress core or leave as plugins. One being the WYSIWYG, but the decision was made to add the text editor to the core. The decision was made to add it because they felt that the text editor was to important for the user/blogger to have to find and install themselves.

Making tough decisions for the user allows the user to experience and use the website/app more easily. Its the basic, “don’t make me think” mentality. Web users don’t generally spend a lot of time on a site so they won’t have the time to spend on making tough decisions. Plus, users (like me) don’t want to deal with consequences of choosing the wrong option or get ‘buyers remorse’ if they find a better option later. Matt and the WordPress crew choose what text editor would function best for the user and added it, we should do the same. We need to make the choices before hand so that the user is confronted with a painful decision.

Drupal, unlike WordPress, doesn’t make any decisions for the user. It has a really big open source development community which is great, but this kind of large developer base creates a lot of options and a lot of options means that the user needs to make those critical decisions on what modules they will need to set up a simple website. Where WordPress is more user centered, Drupal is more community centered and this can be difficult for a first time user of Drupal to build and set up a simple website. Drupal is a powerful CMS and will, in general, have more options than WordPress so it is somewhat unfair to compare the two, but Drupal itself could make some important decisions for the user to simplify the creation process.

Follow

Get every new post delivered to your Inbox.