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.
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!”.
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.
- 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.
- 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.
- 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.
- 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.
- 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”.
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.
- 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.
So lately I’ve been very interested in self-discovery and building my own brand. Who am I? Who do I want to portray myself as? Are those always the same person?
I stumbled into a very interesting conversation between Forty Agency and Heather Herr of Experience Studio regarding archetypes and branding and how those build an entire brand experience and increase customer loyalty. I won’t go into those details here, that may be another blog post some other time. However during this presentation, a book was mentioned, The Hero and the Outlaw: Building Extraordinary Brands Through the Power of Archetypes by Margret Mark and Carol Pearson, that really raised my interest in what this archetypes bit fit into who I am and how I would build my own legacy.
Well, my very own hardbound copy arrived in the mail today, and I’ve spent the better portion of my night starting to read more into it. Very interesting stuff, and as I discover things I’ll be sure to mention them here. So far it’s mostly regarding these 12 archetypes that appear throughout history in stories and stereotypes and how aligning your brand with one of those 12 will consistently help your brand be easily recognized and create value within customers. By using these default stories we can engage our customer quicker, allowing the experience to become easier and can increase loyalty within a brand’s customers.
So far, I’ve been doing quite a bit of passive branding, through my own blog, through local networking and through twitter etc. But due to my interest in continuing to go to conferences and what have you, I’d like to get a real feeling for what I want to be perceived as and how to do that properly. I’d like to really get behind a design style, branding, colors, and paraphernalia (biz cards, stickers, fun stuff).
However, there is a catch in this, right now my name is pretty much my brand, and while it’s great that it’s unique (According to google I’m the only April Holle in the world!) The catch is I might be getting married soon, and if that happens then my name changes, all my effort is then thwarted. Not only am I changing names, I’m changing to April Jones. Do you have any idea how many of those there are? So if you have any ideas on how to gracefully transition this, please chime in!
If you have any personal experience in self branding, please feel free to comment, because advice and experience is never a bad thing to have.
Alright so I thought that I’d have time between sessions and parties to really capture everything I’ve done while I was at my first SXSW, unfortunately, that was not the case. However! I took really great notes, so sit back and relax as I tell my story of one girl, one conference and thousands of geeks with great ideas.
I packed, I got into a cab, I stood in security, I boarded, I flew, I landed, what now? Taxi! Hopped in and jetted over to my hotel, while my room wasn’t quite ready I got to check in and have them hold my baggage which was nice. Stayed at the Radisson, which was alright, but next year I’ll definitely be staying at the OMNI, it’s just more… well… COOL. Anyhow, off to the conference!
Walking down to the conference center I’m already spotting people with SXSW badges and gear rolling down the street. The conference center was swarming with geeky peeps all excited and not quite sure what to do or where to go yet. Instantaneously greeted by the Integrumlins hacking in the halls already working on some new inspired SXSW twitter application. I am directed to the check in line, which spans AROUND the corner of the conference center, estimated wait time, 40 minutes. Vaguely reminded of college registration, I step in line and begin my journey to check in. The line moved surprisingly quickly and before I knew it I had a new shiny badge and my very own SXSW bag of swag.
Met back up with the integrum peeps and proceeded to elimnate about 98% of the paper products in the swag bag, poor trees! Chilled for a bit before the first session, Respect! by featuring team members of Happy Cog and Douglas Bowman of Google.
The main premise of the panel was how to gain respect in our careers, from our colleagues and our clients, by developing concepts on how we can translate what we do in a way they can understand and respect it, as well as interpreting the value of what we do.
The important message here is getting the client to understand what exactly goes into the process of great web design. As Jason Santa Maria put it, “[It's] difficult to respect something I don’t understand, you have to get what went into it to respect it.” To have the client get what gets into it, you have to involve them early, letting the client draw and express what they really would like to get out of the website and giving them ownership of ideas, making them part of the process of initial strategy.
Having all the right research of what the client really needs is important. Happy Cog conducts extensive client research, going into their client’s office and really discussing with everyone regarding what they really need. “It’s the tipping point when you’re in individual meetings and they go to shut the door, you know they’re going to open up to you and trust you”, Liz Danzico stated, “creating an understanding with them that they find valuable.” If you feel you usually don’t have time to really get to know the client and their needs, start to make time within your proposals.
Another way you can gain client respect for you and the work you do is to not nickel and dime them on small changes and corrections. It’s awesome that the client wants to make it perfect, just make sure you’re consulting them through the process.
Also, when you help clients through the process remind them of the WHOLE process and what they’re doing right now at this very step. We sometimes forget that clients don’t have the website on their minds at all times, they have other business issues to worry about as well, how the company is doing, if they have to hire or fire, what about those health benefits their employees want? So remember that while their website might be forefront in your mind, they have other things going on and they need you to remind them what they’re doing in the web design process and why it’s important to the website.
Also be aware of how web savvy your client is. If they’re pretty good at knowing the small stuff, don’t be lazy, use that to your advantage by being able to teach and push their knowledge farther regarding some of the more advanced techniques that are involved. Remember, understanding is the key to respect.
Copy is one thing, visual representation can be the sticking point in a client relationship. “Visual representation is VERY personal” Jeff mentioned. Happy Cog gave us some solutions on how to get over this extreme hurdle in the relationship unscathed by giving the client two completely seperate solutions to their problems offering them up as “this says this about you, that says that about you” Jeffrey Zeldman recommended. Jason Santa Maria suggested “have the client focus on the problems rather than solutions” since the solutions are your specialty and your clients problems are their specialty. This gives the client a feeling that you’re holding the keys and they have to consult you on “the best way” to achieve a solution.
Jeffrey raised the question regarding awards and whether awards really provide any metric to our clients regarding how good we are at our jobs. The panel concluded that while awards may have some impact as a metric on how clients respect you, that it’s both small and perhaps deceptive since there are so many awards out there that don’t really attest to great web design at all.
Within the Team
Within your team it’s important to have a certain amount of respect as well. To do this the panelists suggested to make sure everyone on the team was somewhat cross trained or familiar with what each staff member contributes to the project and how their job is also vital to the project completion and success. As said before, it’s hard to respect something your teammates may not fully understand.
Other Interesting Thoughts
I found that during the course of this years conference a reoccuring theme appeared with content collection and creation, lots of shops are demanding content be provided before the design process ever begins, which is great because we’re shifting focus from the aesthetics to the real reason the web began in the first place, CONTENT!
Happy Cog team members also stressed the importance of good content, they make actual editorial documents regarding the voice and use of the content throughout the site to really define and bring life to the brand. Also, the content needs to really be informative, as Jeffrey cautioned, “Sites [are] reading too marketing and not enough web.”
Overall a very interesting session and a great way to start off the conference. I’ll be posting more take aways from more sessions as I have the time today and tomorrow, so keep your eyes peeled. Now I have to hop in the shower for the last day of exciting SXSW action!
I’ve left my position at Terralever as a front end architect to explore other opportunities within the Phoenix area. Over the last few months I’ve developed an interest in other aspects of the web industry, not just xhtml/css. I’d like to expand my abilities in areas such as web marketing strategy, seo/sem, design and other areas in web design and development. Terralever is a great company that provided me with spectacular opportunities to work with big name brands and cutting edge technology. However, each employee is very specialized and a very T shaped professional, while this position allowed me to become very specialized in XHTML/CSS, I didn’t find the flexibility I required to delve into other areas I was interested in.
I have accepted a short term contract with Drawbackwards, a smaller strategic design and interactive marketing agency. I will be filling several roles at Drawbackwards that will enable me to have the flexibility to explore the other areas of the web industry that I’m interested in. Over the last week I’ve been able to create information architecture, SEO/SEM suggestions, project plans, etc. I’m sure this is just the beginning.
I’ve realized that I’m interested in more than just how the web is created. I want to know how people make the web great. Focusing on strategic approaches to connect great companies and services with customers and users whose lives will be enriched by these products, services and relationships.
Look for the tone of my website to change a bit, perhaps less technical and more theoretical. With the career change I’ll have more mobility, working from home three days a week, so I hope to be able to post more often. Also, in early March I’ll be attending the South by Southwest Interactive Conference, so I look forward to posting regarding all the exciting ideas I get from there.
A collection of user interface design patterns and trends that are becoming “standard”.
A standard design gallery featuring your not so standard oriental designs.
The perfect carrying case for your new Mac Air.
Great article on selling customers on emotion rather than technology and process.
Scientists create robots that lie to save themselves.
Stickk, a new service real financial motivations for meeting your own goals.
Domino’s BFD builder makes building your favorite pizza a creative experience.