april.holle.blog

My car has been running on empty for almost two days now, I seem to notice that I do this a lot and I chalk it up to my experiences at gas stations as to a reason why I let my life be possibly hindered by running out of gas rather than to take ten minutes and fill up. Below is just one of these experiences that shape this consumer behavior.

I’m pretty busy today dodging from salon appointment to home to do some work in time to get back out on the road to get to a meeting. I have been running on empty in the car for two days, so I decide to stop at the am/pm on the corner of McClintock and Southern in Tempe, AZ to get some gas quickly before I head back home.

I’m not a real big consumer of am/pm because they seemed to be a leader in a movement I noticed a few years ago where gas stations started charging their customers extra to pay by debit or credit to cover their fees from credit card companies to process these cards. Thanks guys. Anyhow, so I stop in to this station because it was close by and recently completely renovated and I thought I’d check out if the experience had gotten any better. I pull in, and I notice flaw #1.

Flaw 1: Poor support column placement.

When I go to get out of my car, there is a support column RIGHT where I would open my door out to. So even though I parked a decent distance from the pump, I still can barely get out of my car. I manage to squeeze out of my car door and go to start filling up. I notice Plus #1.

Plus 1: Pay at pump, yaay convenience for me.

The pumps now take cards at each station instead of at the main pay column in the middle of the pumps. This is helpful to me because I don’t have to go to the pay column, stand in line to pay, etc. I also don’t have to go inside. So I enter my card details, agree to pay the extra fee to use a debit card. I go to the pin pad and there’s a flat label that says Yes and a flat label that says No next to the push button number keys. I assume I push 1 for yes and 4 for no. I push 1 for “yes” and it goes to the next screen, a.k.a. Flaw #2.

Flaw 2: Don’t up-sell me when I just paid you a bunch of money to already do something I think should be standard.

The next question is, “Do you want to buy a car wash?” Ok, I get this, you’re trying to upsell me. You want to offer me a added bonus that I would enjoy. Great, but don’t offer this to me when you just charged me for something I think should be standard when I purchase from you. I can appreciate your gesture out of context as my car is dirty, but I really don’t have the $ or the time.. also you never told me how much extra it would be so no I’m not going to say yes. Here comes flaw #3.

Flaw 3: Inconsistent interface outcomes.

I push four for “no”… the pump beeps at me but the screen to upsell me the car wash is still there… I push four again… this time two beeps from the machine but still nothing happens to get me through the payment process on the screen. Why when I pushed 1 for “yes” it worked but now when I want to use 4 for “no” it won’t? Is this a shitty way to make people have to buy a car wash, do I have to just to pump my gas? So now I think my pump is broken. Shit. Just as I move to get back into my car and go to a different gas station, here comes a guy that has a blue polo on. I’m like oh what’s this guy want? He’s about to be flaw #4.

Flaw 4: Sales guy disguised as customer support.

He’s a decent looking guy, looks trust worthy and decent so I’m not thinking that I’m going to get kidnapped or mugged by talking to him. He smiles, taps on my window (which has some dings in it) and says, “You know, we can fix your windshield for free today if you like.” What? Ok, nothing is for free. I look at him puzzled (and a bit annoyed that he’s selling me while I’m having trouble with the pump) and retort, “What’s the catch, nothings for free?” And he says, “Well you have insurance, probably full coverage or glass coverage, you pay a premium every month that isn’t used.” and he continues, “Since Arizona is a “Driver not a fault state it’s automatically covered in your premium every month.” Ok, what the hell did he just say? Is he trying to sell me a premium monthly service, is he trying to say that it’s already covered in my insurance, don’t I have to pay the deducible before insurance will cover it? I just get more confused and then realize I’m not even HERE for glass service. I say, “Look I’m really not interested, I’m really busy and I’m just trying to get some gas but this pump doesn’t work it just keeps trying to sell me a car wash that I don’t want.”

This one could have been a plus (just like the car wash), but the way it was handled just felt wrong. You’re right those dings in my window bother me, and yea I do want to get them fixed easily and cheaply but they don’t bother me enough to go to an auto-shop. But don’t say things a free when people know the money comes from somewhere. I would have been much more inclined to talk to him about doing it today (if I weren’t so busy) or at a later date if he would have told me more about the service and how little it would cost since they work with my current insurance to take care of the  cost.

Also, tell your sales people to approach people while they’re waiting for gas to be pumped after they’ve finished the transaction with the pump. It was so hard to listen to him while I’m trying to figure out why the pump won’t work. But lets get back to the story…

He says “Oh, I see this problem all the time, let me help.” Incoming Flaw #4.

Flaw 4: If you know something is broken, for the love of God fix it.

This is another situation where it would be a plus if he were just offering help , but he sees this issue all the time, why don’t they just fix it? How many customers does it take to drive away with a bad system before you stop to fix it? I understand if only a few people have this issue, but for the sales guy to notice that he helps people with this issue all the time and then to not fix it.. what the hell.

So, I accept his offer to figure out the “trick” to getting this pump to work. At least it will make him quit trying to sell me a service I don’t even know how it would be paid for. He goes over to the push button interface, and instead of pressing 4 for “no” he actually presses on the flat label “No” and like magic the screen is gone. Flaw #5.

Flaw 5: Inconsistent interface.

Why would all the numerical keys be push button but the “yes” and “no” be completely flat. They weren’t even raised even a little! If you’re going to have buttons to interface with the system, make them look all the same! So, on the next screen comes flaw #6.

Flaw 6: Don’t offer something (pay at pump) that just doesn’t work.

“This card is not accepted.” I look at the sales guy and he says “Eh, that happens all the time too, the card reader doesn’t like some cards, try again.” Flaw #4 strikes again! I slide my card again, and the screen says “Please come inside to pay.”

At this point, I’m over even wanting to buy gas here. I excuse myself from the sales guy and get back into my car, still on empty, to drive to a Shell station several blocks away. Shell an interface I can use (all flat buttons) but charges me for use of my debit card, but at least I can get gas and not be up-sold to every five seconds while I try to figure out an insanely unusable interface.

I’m a big fan of the whole Getting Things Done system, however, I’ve always been a list person. However, in Getting Things Done David mentions my lists:

To-do lists make you feel like you have to get everything done on them today, instead of pacing yourself.

When I read what David had to say about to-do lists I realized why I had this love hate afair with my lovely life-leveling lists. So what’s a girl to do?

Well, while looking up GTD type accessories to keep my life together even in the busiest of times, I happened to find David Seah’s Emergent Task Planner. This handy tool has saved my life!

It keeps my love of lists intact while making me remember that if I don’t get everything done it’s OK, because I’m awesome for just even finishing three items today. For each set of three tasks I complete it has a little “go get ‘em tiger” type message, and when you get to a total of nine completed items, it reminds you that you may burn out if you keep going like you are.

So how do I use it?

1. I start my task list by listing my “permanent tasks”, thinks like meetings or items that are ABSOLUTELY required today.
2. Then I list all the other tasks by priority that I need to finish that I know of. Many of these are carried over from the previous day’s list.
3. For each task I make an estimate of how much time I think it’s going to take me to complete.
4. Then I fill in the time grid based on the estimates, this allows me to know how much “free time” I have during the day for those random tasks or meetings that may popup
5. I then use the bottom under the task list to jot down any tasks that pop up during the day that aren’t URGENT but need to be carried over through-out the week
6. When I finish a task, I still get the satisfaction of checking it off, and I also fill in exactly how much time it really did take me to complete.
7. Get Productive, Wash, Rinse, Repeat!
8. Then at the end of week I use the completed sheets to fill in my time sheets at the end of the week.

Sometimes design is all about the details. Recently, the following design Easter egg was pointed out to me. On the inside flap of Moo Stickers is a lil happy guy that says, “You ain’t seen me, right?” and if you break the flap stapled on the other side he says, “Eeek! You broke it. No cookies for you!”.

Secret moo man

Originally uploaded by hallywoods

When the detail is put into these little corners where often it is overlooked by designers and never given a second thought to consumers, something magical happens, a clever little bit of “secret” is shared between designer and consumer, both are enriched by the process.

If you liked this lil design Easter egg, check out Paul Annett’s recent SXSW panel, “Oooh that’s Clever!: Unnatural Experiments in Web Design” on slideshare for more magical design moments both in print, envirnoment and web.

Has web design transcended into it’s full potential? If you ask Dan Willis of Sapient, he’ll say it’s just print in disguise. He believes that while web design certainly has just begun to blossom into the medium that interactivity the world wide web has to offer, it’s not quite there yet.

Even as Web 3.0 edges its way, web design is still ruled by “print-style” design, pushing web centric content (such as up-to-minute story updates or geo-targeted results). He argues that there is more growth into “Transcendent Web” on the horizon, and cites five different primary elements that will push web design to new heights.

1. Ambient Awareness
   Micro-blogging such as Twitter allows users to become aware of a bigger picture of who someone is via small 140 character updates, allowing a fuller personalize perspective into that person’s life, culture and perhaps society in general.
2. User Created Context
   Users now create their own experience online, selecting the ways to they want receive their information (RSS feeds vs. reading on the blog), the more you try to control how the user moves about the web, the more they rebel and go else where for their information.
3. Random Voyeurism
   Humans like to experience what it’s like to be someone else, to share an honest moment that provides insight into others, the web offers new ways to experience this through personal blogs, micro-blogging, photo and video sharing.
4. Self-aware (but ultimately uncontrollable) Content
   Content on the web now knows what kind of content it is through the use of xml, tagging and keywords, but ultimately this content can be used by anyone for anything in or out of context. Once you put content out there, it can be mashedup and reused completely.
5. Experiential Content
   With video, images, real-time micro-blogging, and other content available, many web interactions could be exploded into entire experiences as if the users were almost “there”.

To learn more check out the SXSW Highlights Video or download the 15-page paper by Dan Willis.

I presented at AIGA Arizona Say Anything on November 10th. Here is the write up of the talk based on the slides that were presented that evening. I hope everyone got something out of this presentation and please feel free to post comments regarding questions you may have on this material. Thank you to AIGA Arizona for the opportunity to present and I hope to be back real soon.

Step 1: What is Web Design?

Often fear is simply a lack of understanding, so to begin this journey, let’s start by defining what web design, as a craft, is. I feel that Jeffery Zeldman of Happy Cog Studios put it best when he summarized web design as:

Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.

Wow, lots to digest there, let’s break it up a bit.

The creation of digital environments that facilitate and encourage human activity.
So basically all this is saying that web design is design within a digital space (i.e. the web) but more importantly that it’s main purpose is to facilitate and encourage human activity. We want to interact with them, give and get from the user. This allows for a special kind of communication that we haven’t ever seen from media before. Instead of dictating to the consumer, we can now receive and act on information provided to us, very powerful.

Reflect or adapt to the individual voices and content.
While the web is still a relatively new media format in the grand scheme of media and advertising, it’s still very customizable. We should harness this adaptability and use it to the best of our abilities to reflect and present the content in a very specialized manner. The web was created for the purpose of collecting and sharing information; web design cannot forget these roots as we move forward. Content is king, it’s the most important part, and should be treated that way.

Change gracefully over time while always retaining its identity.
Web design is unlike many other forms of media because of the way it can be changed over time. Unlike print, we can continue to add, take away and mold this space over and over again. The tricky part is doing it gracefully and staying true to the original brand and statement. If we change too often or off course of our brand in can alienate our users instead of creating those core connections and communications levels we would like to have.

Overall, web design is very similar to other types of design; there are still guidelines, best practices, and techniques that separate good design from the bad.  Also, just like all other types of media, it’s centered on communication, however there is a new addition that makes this a new frontier, the interactivity of the users who use it.

Now that we know our adversary, let’s delve into those guidelines, best practices and techniques that will allow you to be empowered to go head first into the fight.

Step 2: Knowledge is Power.

The more you know about why and what you’re designing for the web will help you in your quest.

Start with a purpose.
What’s the real reason behind why the design needs to be created? Perhaps it’s to share product information or to be able to process online orders. What ever it is, nail it down and keep it simple. Even if there are a few reasons, keep them concise and in front of you at all times. This will help you stave off the needs for the “wouldn’t it be nice if?” scope creep that can really get you in trouble later.

Define your users and what they need.
Who are your users? What do they want from you? More often than not they won’t need a sales pitch, they’re qualified leads or else they wouldn’t be there. So veer away from the extended sales pitch and instead focus on giving your users the information they need & want about your services or products. Need help figuring out what your users want the most? Check out your current google analytics statics to see what your users are looking for the most, or check out a heat mapping service such as Crazy Egg that will help you visualize what your users are looking for and clicking on.

Communicate to develop correct functionality scope.
Talk with your client, project manager, and development team to come up with a correct scope of functionality. When the client signs off on designs, often they’re not only signing off on look and feel but functional items such as searches, drop downs, user functionality, etc. Make sure that everything that’s depicted within the comps is with in functionality scope and doable.

Collect all content.
This is a tough one to accomplish, but stick in there and this one will pay off! More often than not timelines slip because the client doesn’t realize the scope of content needed to complete a web project. When you focus on getting these items right off the bat it allows the client to become more of an active participant in the planning and will help them understand how much work is involved in the design and development process. It will also keep them busy so they’re not prodding for more features or badgering you about deliverables sooner than the timeline suggests. Collecting all the content also helps you plan out an accurate site information architecture and will help you design with the voice and content already in place.

Step 3: Organize for the user.

Once you’ve got all your parts and pieces remember to organize them keeping the users and their needs in the forefront at all times. Knowing more about usability will help you out here, so check out this definition from Jakob Nielsen.

Usability: the users perception of how consistent, intuitive, and organized it is to accomplish tasks within a system.

Offer the user clear choices.
Don’t overload the user with options, stick to the purposes and users needs that you had outlined earlier. Keep it clear, easy to understand, and if you can make it so easy that the user feels like a GENIUS because it was so easy to use.

Use conventional terms, icons and positioning.
Sure we all want to create something new and fun, but try to stick with the normal terms, icons, and placement on standard web stuff. Such as don’t replace the e-mail envelope with the @ symbol, it will require your users to think, and to break that stream of consciousness enables poor usability.  However, just because you should stick with the standards doesn’t mean you can’t bend the rules, you just have to do it in such a easy way that it can be picked up with minimal effort. Most users scan the page in a F-Shaped eye tracking, so you most likely want to place your most important pieces within this pathing.

Easily digestible content blocks.
Avoid large / lengthy blocks of content if possible. Most web users tend to scan content vs. read it fully so keep it short and concise. If you want to overview content, stick to three to five bullet points with links that go to the full content for those who are interested.

Consider user flow.
Remember for every link you create in your design there must be somewhere that goes to. Remember standard user flows like what are the steps/process when a user registers, signs in, or tries to buy a product? Remembering these steps as you design will help you comprehend the whole flow and layout of the website as a whole.  If you would like help with some of these steps, check out a handy service called Product Planner.

Wireframes are your friends, you can’t have to many.
Wireframes can help considerably when you’re still planning out the placement of major items and user flows, they’re less time consuming and can be really amazing tools when trying to understand what should be the most important elements within a page.

Step 4: Roll up your sleeves.

Alright, with all that collecting and planning I guess you should be ready to actually design something right? Check out some of these tips to make your design to implementation time shorter.

Be smart about imagery/graphics

• Too many images means it will take too long to load, while it loads it will look like crap. So, be smart and use the less is more approach. Also, all those images won’t have the search engine weight as text would have, so remember that when choosing typefaces as images, etc.
• If you REALLY want to use a non-standard font face, check out sIFR for your implementation, but a few notes on this, sIFR uses flash to render the font so it will still impede load time. It will be SEO compliant, but it will also require flash.
• Images can be an accessibility nightmare, if seriously informational text is included in graphics it needs to be in full text as the alt attribute for the image. Instead of having to remember all this, using a regular font and HTML text would be a better decision.

File organization

• Organize your PSD to have all elements grouped together by area such as header, footers, callouts, etc this will make selecting and merging for cutting easier later.
• Include on and over states for navigation, since this is an interactive space these styles will need to included so that they can be implemented later.
• Keep all your layers editable, you never know when you’ll need to change a piece of text or a background color later, instead of redoing the entire PSD, just be smart and don’t merge layers.
• Create a style guide that outlines all fonts, colors, and styles used so that creation on the CSS style sheet can be easily created without having to re-examine your PSD later

Stay true to the end user
Even though you’ve focused on the users during the gathering and planning processes, you can’t forget about them now. Through out design iterations it’s easy to forget about the end user in hopes to quell the client, keep in mind that this website isn’t for your client to use, its for their customers, so they’re most important.