ClearMenu is a project by the folks at Unit Interactive, including me, as a design experiment and commentary on the state of web design in the food industry. You can read more about the project and all the mini-sites at the ClearMenu site. This is a multi-part series on my contribution, “SportsBar”. This first part will focus on the design, while part two will focus on layout development.

Character

When approached about doing a self-directed restaurant menu redesign, a particular restaurant immediately came to mind. I am a big fan of supporting local restaurants over their chain counterparts. There are several restaurants in the area at which my wife and I are recognized on sight. These local places have a special uniqueness (because they are literally unique) that you just can’t find at chains. Often the owners are your server and their places ooze with their personal character. It is sad then to see just how little of that character ever gets transferred into their online menus.

The purpose of an online menu for a destination restaurant (as opposed to a place that delivers or has a drive-through) is to entice a potential customer to actually make the trip to the physical location. So, for my design I decided to focus heavily on creating a large amount of impact to replicate, insomuch as possible, the excitement of sitting in a sports bar while your favorite team is playing.

Perhaps this is seen most obviously in the choice of colors which are vibrant and set into large fields. The slightly masculine oranges, yellows, and blues are placed into alternating bands denoting the different sections of the menu. The constant shifting of highly saturated colors lends some of the energy of game day to the page while the subtle background pattern of diagonal lines and sports balls adds movement while providing the “sports” context.

A Little Off-Kilter

Along with the energy provided by the background elements, I wanted to add some details that would make the user’s experience feel slightly … inebriated. The logo and headline font is Adrianna BigSmalls which purposefully mixes up capital and lowercase letters. The effect isn’t obvious at first but it provides just the right amount of “goofy” for my purposes. The copy is set in Adrianna which, of course, matches the headlines beautifully.

Another detail that will likely only play on the subconscious of a user is the use of drop shadows on called-out elements. The angle of the shadows is different for headlines, featured items, and images. This again supplies the page with extra energy.

It’s About The Food

Of course it is! One thing that almost every online menu gets wrong is treating the unlimited space provided by the internet as though it were print. I feel strongly that every online menu item should have an image to look at. There are usability reasons for this, but from a business perspective I want potential customers to see the food. Text descriptions are great, but nothing will make someone hungrier than actually looking at the food. Well, smell would probably be a better trigger but until we clear that technical hurdle images are the next best thing.

Yet, clicking to view each image didn’t seem good enough to me. I wanted each menu item to be “featured” - to be treated like the hero. To accomplish this I devised a system for the larger resolutions that swaps out the image and the item call-out as the user scrolls down the page. As an added benefit, this system encourages the user to give attention to each item on the menu and to continue scrolling to the bottom of the page.

You might notice that the images repeat. For an actual menu each item would have its own picture, but since I don’t actually own a restaurant I just pulled some food images from my Instagram. This actually led me to an epiphany. I expect most small business owners don’t have a particularly large photography budget which is why restaurants often have little, or very poor, food photography. However, with a tool like Instagram, high quality and controlled photos can be taken virtually for free and added to the site quite easily. My design is wholly intended to represent what could be possible using only an iPhone for photography.

Responsive Considerations

One of the main goals of this project was to showcase responsive design techniques. At smaller sizes the persistent images drop out of my design in favor of a more straight-forward and touch-focused experience. The images live instead in a simple lightbox and the “featured” items are treated a bit more traditionally with the owner having the ability to highlight the house specialties.

At the smallest sizes, the navigation drops from the top of the page - where a desktop user will usually expect it - to the bottom of the page. This follows the theory that someone on a mobile device is generally more interested in viewing the content straight away and will look for navigation only once they are done perusing the content they already have. The navigation is always the last thing in the HTML so the site has no need of a “skip to content” link for accessibility purposes.

Designing such a large menu for responsiveness was quite a challenge. I’ll take a closer look at how I realized this design in part two of this series.

• Part two of this series, “Layout Development”
• Part three of this series, “Page Behaviors”
• My Menu
• ClearMenu.com Home

Okay, that’s not really true. I have nothing against the comic book hero proper, but neither am I a proper comic book geek. I’ve never read so much as a single issue involving the hijacked hero of Germanic mythology. What I am is a film fan, especially when it comes to films involving super heroes. And it is the recent movie version of Thor that irks me.

But again, not exactly the movie proper. While it wasn’t exactly the pinnacle of the genre, neither was it a terrible film. Much of it, mainly the parts in Asgard, were very well done. My problem is really with the inclusion of Thor into the Avengers continuum.

The following contains spoilers. If you haven’t seen the Avengers movies, go now. Watch them then come back.

One of these things is not like the other

I love the Avengers movies - particularly, Hulk 2, Iron Man 1, and Captain America 1. Those three movies are among the best super hero movies yet made and all tell compelling stories of slightly extraordinary men becoming reluctant heroes. Rogers, Banner, and Stark also share a very similar back story. (Again, I’m working from the movie cannon here.)

Captain America

Steve Rogers was an unhealthy, undersized boy that was transformed into a fairly prototypical super hero by a military super-soldier program. He is bigger, stronger, faster, and more resilient than normal men. However, he was made to earn respect as a soldier by abandoning his assignment as a morale-boosting performer and single handedly staging a POW rescue mission.

He falls in love with a military scientist but he can’t be with her because she died while he was frozen in the arctic for sixty years.

Rogers saw his benefactor murdered, his best friend killed on a mission, and managed to accidentally outlive every person he ever knew or cared about. We only get a hint of it in the movie, but there is potential for some serious angst.

The Hulk

Bruce Banner is a brilliant scientist that accidentally got shot full of radiation on the job. Instead of killing him, the radiation activated something in his body forcing him to morph into a giant, ridiculously muscled, super-man when his stress level climbs too high. He initially retreated from American society, but eventually developed discipline over when he transforms and his activity while in his transformed state so he can defeat another super-soldier experiment gone hideously awry.

He falls in love with a fellow scientist but can’t be with her because she is the daughter of the general that is trying to recruit/kill Bruce. Also, he tends to transform into an uncontrolled, raging, super beast which can strain a relationship.

Beyond his general inability to coexist with other humans, Bruce also has major daddy issues. His own father experimented on him as a child, which is why he survived the accident, and his girlfriend’s father either wants him dead or on a military leash.

Iron Man

Tony Stark is a billionaire, a play boy, and an unparalleled inventor. He made his fortune by developing high-tech weapons for the U.S. military but abandoned that work when he learned that his weapons were being sold on the black market to foreign terrorists. He designed and fabricated a super suit for himself and, as he puts it, successfully privatized world peace.

He falls in love with his assistant cum company executive. While he manages to end up with her by the end of the second movie, chances are that his philandering, alcoholism, and seeming addiction to putting her in mortal danger will make their relationship complicated at the very least.

Stark’s neuroses were laid out plainly at the end of the second movie. He is emotional, irrational, and has something of a death wish all because of resentment of his father. He is so damaged that Nick Fury declines to offer him a position with The Avengers. (Temporarily, obviously.)

Thor

And then there’s Thor, an immortal demi-god from another dimension/planet whose abilities (strength, speed, flight) are a result of being an alien warlord that wields a science-magic hammer. He was sent to Earth as punishment for his arrogance and stripped of his hammer which really didn’t slow him down very much. True, he couldn’t fly, or level mountains, or commit genocide on the same level as before but he’s a prince of a superior civilization of warriors. He pretty much was able to handle himself just fine.

In any case, he learned his lesson (in, like, a day) and got his hammer back so he could defeat the world destroyer from The Day The Earth Stood Still. That was it for daddy being mad at him - they’re totally cool now. And, yeah OK, his brother is about to try to destroy the universe, but they’re not actually brothers so that’s kind of cool too.

He fell in love with a scientist who he can’t be with because he smashed the bridge between the two worlds with his hammer which equates to a transportation problem. Their relationship is fine as long as another means of teleporting between Asgard and Earth is found.

Total Mismatch

Movie-Thor’s nature and origin make no sense along side his counterparts. Why exactly does an alien warrior-wizard need to team up with three American super-soldiers? I mean, he’s the heir apparent to the throne of Asgard, and he already has his own personal posse of super heroes!

Beyond that, there’s just nothing compelling about his character. I’m sure the tension with Loki (demon pseudo-brother) will be played up, but these guys aren’t Wolverine and Sabertooth or Obi-Wan and Anakin. Thor and Loki don’t seem to ever have really liked each other and each is fully prepared to wipe the other out of existence. If the only reason to have Thor around is so that Loki can be the bad guy, then I think Marvel is severely underestimating their library of super villains.

Thor will also be a redundant character. I’m greatly looking forward to the interplay between the self-loathing narcissist Stark, the brooding Banner, and the honorable always-do-right Rogers is going to make for some very interesting situations. I fail to see what Thor brings to that mix.

I have extremely high expectations for The Avengers, and I hope Joss Whendon pulls it off. But including Thor was an unnecessary bluder by Marvel.

Priorities and values are not determined in times in crisis. Rather they are decided upon during developmental periods when their need is less urgent. For the considerate they come through much soul-searching, contemplation, and more than a little experience. For the haphazard, priorities and values are merely the default of the society around them.

The point of these mechanisms is for guidance during times of crisis or confusion when decision making is difficult. You turn to your values for clarity and your priorities for impetus. By following them strictly, the sum of your decisions should turn out the way you want it to. There are two pitfalls I see:

1. First, you must remember to measure each decision against your guides lest you risk surprise when the results differ from your expectation.
2. Second, there is extreme danger of convincing yourself that you have a strict set of priorities and values when, in fact, your actions are guided by a completely different set. This makes you a hypocrite and others will notice it long before you do.

I apologize in advance for the negativity of this post, but I am just sick of reading tripe like this. This sanctimonious, martyr-for-the-people, pity party is so wrought with illogicality that I won’t have time to point out everything that is wrong with it. I’ll hit a few choice points instead.

People Have Not Changed

“The human race has become spoiled. Every day, new and incredible technology debuts, and we just seem to brush it off as expected, or worse, a late arrival.”

The human race has not become spoiled. If anything, it has always been spoiled. The Israelites survived in the wilderness by gathering up magic dew bread and their main reaction was, “Eh. You got any meat?” Entitlement is not a particular affectation of the current crop of bipeds.

I’m forced to bring this point up all the time in response to people complaining about the way the world is “now”. The world and its inhabitants have not fundamentally changed. Ever. There are only two reasons to maintain the “in my day” myth:

1. Self aggrandizing: The world used to be great, just like me! I’m nothing like the world now.
2. As an excuse: If only the world hadn’t changed I could be a better person. Alas.

The iPhone is not Human Flight

“Apple just presented yet another mind-blowing device with mind-blowing features. I think we’re spoiled little brats.”

The author repeatedly compares the newest version of the iPhone to milestones in technological achievement such as human flight and space exploration. This is completely ridiculous. People were awed by flight because it was something that had never been done before. Same with all of the innovations that the author mentions. Nothing about the new iPhone comes remotely close to those kind of achievements.

It is appropriate to be excited about the new technology on display, especially concerning Siri. But expecting people to break down in tears like when we landed on the moon? Really?

People Have A Limited “Wow” Threshold

“Just yesterday, I was in the airport after deplaning from my flight to Minneapolis when I overheard a fellow passenger talking about his beef with air travel. He just couldn’t believe that it would take 5 hours for a flight to get from Denver to Anchorage, Alaska. Did he forget the part where he could be in a chair, flying through the sky, and arrived there in ~2% of the time that it took only 100 years prior and with far less potential of death and dismemberment?”

This is probably worth a separate, longer exploration, but it’s also the most important response to be made: People aren’t capable of being continuously wowed. It’s just not how we’re built.

The amount of wonder someone can experience is set on a fixed, sliding scale. Once we experience a new “wow”, all of our future experiences will against that be measured. I expect that every human that has ever flown experienced a wow moment on their first flight. But every flight after reduced the wonder until it became pedestrian.

This is not “unfortunate”. Without this effect, every novel technology would remain a novelty! That we can cease to be amazed is vital to our ability to improve.

I agree with the author that living with a sense of entitlement is a poor way to go about. It is worth taking the time to be amazed and thankful for the incredible things that can be accomplished today. However, anyone that gets hyperbolic on either side of the iPhone 4s argument needs a serious amount of perspective.

I failed at the end of last week in my mission to write something here at least once per work day. Thursday and Friday were utterly devoid of content. It was a stumble only! I’m not giving up and I’ve been bolstered in my resolve by my friend, Adam, (no relation) who has also taken up the challenge and started a new blog.

I wish I could recommend it to you. I do! Alas, my good friend ventured into my no-read-zone with this post about vampirism, or somesuch.

Here’s the deal. You may not know this about me. I’m a needle bigot. I hate needles. Completely. Indiscriminately. I refuse to associate with them and certainly do not let complete strangers stick them inside my body in order to drain blood from it. That is not something I do willingly, but every so often it becomes unavoidable.

Sometime during my larval stages a medical professional decided that he would really very much like to shove a camera down my throat to determine just how vigorously my stomach was trying to digest my esopha … esopho … e-sofa … food tube. This did not scare me. Unfortunately, this camera-gag procedure required a high level of not-throwing-the-camera-up which meant that I would have to be drugged into a near-death state. Anesthesia = needles. Needles = terror. It’s a very simple formula.

So we show up on the day of my execution and are ushered into a small room where I am to wait until they are ready for me. It turns out that while I wait I am expected to hydrate myself. Awesome. Though the arm. For-the-love-of … OK, it’s needle time. I knew this was coming, and though I’m terrified I man-up, close my eyes, and grab my mother’s hand to keep from fainting. The needle goes in and I am the proud owner of a second hole through which I can consume salt water.

Now we wait. For two hours we wait while I stare at the repugnant invader and try to remain perfectly still so I don’t anger it. My blood pressure increases and decreases as my body tries to decide which state will cause me the most discomfort. Finally the nurses reenter - with another needle/tube/torture apparatus. I begin to freak.

Apparently the first needle is only good for delivering water - a task for which my body already had a perfectly functioning hole pre-installed. No matter, say they. Stupor must be induced through the yet un-punctured arm. I freak a little more.

My mother, sensing my impending crash throws up a Hail Mary. She explains my fears. Let’s them know that the situation is getting to me. Perhaps they can numb the skin before giving me the second IV? So I can’t feel it and can maybe pretend it didn’t happen? The nurse supposes they can and exits the room. The doubtful way she says it makes me suspicious. The freak holds.

She returns carrying not a squeeze tube, or spray bottle, or even an ice cube. No, this genius thinks that, in order to help me with my needle phobia, it’s best to numb my skin by sticking me with another needle. She extracts the top from the hypodermic and does that, “No, I expect you to die,” flick and squirt right in front of my face. (Why can’t those things come pre-flicked-and-squirted?) I completely freak out.

Full on crying and hyperventilation. I don’t remember doing so, but if I stayed true to character I probably aimed a kick. It takes three nurses to calm me down and monitor my blood pressure and such for a half-hour before they can try again. The needle goes in, the camera goes down, everyone survives.

Two lessons from this: First, be very careful what you ask for - the moron might give it to you. Second, don’t stick needles in my face. I am no longer a child. I will triangle choke you.