BlogmyQuery – BMQ

Just this spring, Apple revealed that more than 25 billion apps have been downloaded from its App Store. Add to that the 10 billion Android Market downloads announced at the end of 2011, and you’re looking at more than 35 billion apps downloaded cumulatively across both platforms. Clearly, consumers love their smartphones and the mobile apps they can get on them – but they can’t love all the apps.

With over a million different apps on the market, the competition is fierce. So unless you’re Facebook and pretty much guaranteed a ubiquitous presence on smartphones everywhere, you have to figure out how to make your app stand out. Having the next big idea might do it, but with the marketplace so saturated, that’s becoming increasingly difficult to do. New competitors are instead focusing on improving or redesigning existing ideas to make a better app.

One of the most effective ways of getting an app to stand out should be obvious, and yet many app developers don’t spend nearly enough time on it: creative design. What an app looks like is the first aspect people notice about it – even before they download it, and certainly before they test it out and see how it functions. That initial visual impression affects the entire user experience and will likely determine the ultimate success of an app.

If you’re doubtful, just look at Apple. Many people don’t realize that, despite now being a leader in the industry, Apple was actually not the first company to provide a mobile operating system or mobile apps. Before iOS, there were the likes of Palm OS, Symbian, Windows CE, and BlackBerry OS. And yet, like with almost everything else, Apple quickly surpassed the competition in the mobile market. In large part, this was because iOS simply looked better.

It set completely new standards for the role of creative design in the mobile app user experience arena; something that has always been one of the most basic foundations for all Apple products and services. And successful app developers have been smart to take a cue from the giant whose platform they’re building on. If you take a closer look at some of the top apps, you’ll see they tend to follow three general guidelines:

Forget Web Design

Mobile design comes with its own set of rules and expectations, so when you’re designing for mobile, don’t let the standards of web design dictate what you do. Sure, you should maintain consistency of look-and-feel across devices and stick to brand standards, but you also need to keep in mind conventions that have been established for mobile operating systems.

A great example is how Southwest adapted its website to the iPhone. The mobile app incorporates design elements from the site, but has clearly been created to provide the optimal user experience on a smartphone:

Keep it Simple

One of the biggest trends in mobile app design today is simplicity. Clean, intuitive interfaces that are easy to navigate and don’t try to be flashy. “Less is more� is not a cliché in mobile app design, but a standard.

One of the best examples of this is the incredibly successful Instagram, which combined a great idea with a simple, easy-to-use design and intuitive functionality. Many new apps are doing the same thing, regardless of industry. Two examples are the XFINITY TV and Medi-Weightloss Clinics apps below.

Make it Fun

Have you ever heard someone say they don’t like fun? For mobile apps, this means incorporating things like bright colors, cool textures, 3D effects, fun buttons, and any of a thousand other options. And no, simple and fun are not mutually exclusive as long as you don’t go overboard.

Just take a look at Yelp, Groupon, and Wunderlist – all popular apps that take advantage of interesting creative design elements while keeping the overall interface clean and simple:

As long as you keep your audience in mind, you can even forgo a bit of simplicity to make an app more exciting. Like when it comes to a drinking app. Take Brewski Me for example: every single design element – from background texture, to fonts, to buttons – took into account the preferences and interests of the target audience. It’s fun and flashy, but without compromising the simplicity or intuitiveness of the interface. There’s a reason it won the 2011 Best Beer App award.

For people outside of the app design process, User Experience (UX), a.k.a., how the app controls in the user’s hands, can seem a little nebulous. What exactly does it entail? Where does UX end and UI (user interface) begin? Do they ever cross over?

While they are two different disciplines, they are absolutely intertwined. UX defines the userflow and functionality of the product, while the UI is all about what visuals you see while using the app.

Some additional apps that do a great job of giving users an intuitive UX coupled with a stunning UI are:

Clear

UX Highlights: Simple list of to-dos, gesture-based clearing of items, pull-down to add a new feature, pull-up to clear a finished list, and pinch to move through menu hierarchy.

UI Highlights: Bold, gorgeous colors. Beautiful chiming animations make you feel accomplished and keep you smiling. Vibrations upon choices give that little extra punch that you’ve completed something monumental. The usage of color coding to indicate priority is coupled with the work-as-you-expect it movement of items. Add in the different theme options, which grow as you install different applications on your device, and Clear is the end-all, be-all of to-do lists.

Path

UX Highlights: The springy menu at the bottom left, housing all of your action items, takes the place of the typical TabBar seen in most applications. Also the left-side slide-out navigation, which houses details about your user account is reminiscent of Facebook, but that’s okay because we think perhaps Facebook’s Timeline feature may have borrowed a thing or two from Path’s.

UI Highlights: Aside from the gorgeous graphics, all of the animations, interactions, textures, structure of information, loading bars and even the typing experience makes it easy to use. The parallax scrolling on the Timeline is particular mesmerizing.

Miso

UX Highlights: With a TabBar at the top, Miso sets itself apart, but keeps important information always in a users view. The simple grid view for popular shows lets you find data quickly, and interior pages are laid out in an easy to understand fashion. The Check-In & Rate screens are some of the most straight-forward, intuitive around.

UI Highlights: Using a dark interface, perfect for not bugging other viewers around you, coupled with tiny little animation touches, Miso makes for a great viewing experience. Pull to Refresh unleashes a rainbow of fun!

Tweetbot

UX Highlights: The account view pop-over allows for super-quick switching between accounts, great for experienced Twitter users. A slide-down sub-menu for each tweet makes replying or retweeting a pleasure. The custom icon bar at the bottom of a new tweet makes adding tags, photos even easier. By far the best Twitter application available.

UI Highlights: Everything? From the subtle textures used on the buttons and navigation bars, to the plethora of indicator sounds that let you know what the app is doing, Tweetbot is the sort of application you love to use – just because it’s so much fun.

Nevus

UX Highlights: The most important features of a skin care app – what the UV Index is and when you need to reapply sunscreen, are given center stage. The Skin Record feature is intuitive, fun, with a straight-foward “compare to a pennyâ€� feature to track size. Password protecting skin records is a nice added feature.

UI Highlights: Simple, clean colors work well in the sunlight and communicate effectively. The design of the Skin Record chart is particularly straightforward, while attractive.

Yahoo! TimeTraveler

UX Highlights: The card-style destination city chooser is simple and effective. The spinning “duration� picker is a lot of fun to play with. Top navigation floats above content but is always available for users to utilize.

UI Highlights: Animations on the aforementioned card-style destination city choose is flawless. Beautiful colors and buttons lets the app feel like Yahoo!, but very distinct as well. Informational rows are clean, while giving you plenty of room between each stop to facilitate reading.

Just Landed

UX Highlights: Quick interface lets you enter the flight number, then tells you how when you should leave to pick up your passengers on time. All of this without any muss, or fuss. Just to the point.

UI Highlights: Clean and stunning interface. From clever little animations of turbines spinning to the distinctive time meter indicating how long until you should leave to the beautiful illustrations beneath each airport, this app makes you want to always volunteer to pick up friends when they arrive!

Day One

UX Highlights: Simple interface shows you what you’ve done and gives you access to everything. Concise list views and a simple writing interface.

UI Highlights: The epitome of clean. Nothing superfluous, only solid colors and subtle suggestions. The sounds make this app a stunner.

Readability

UX Highlights: Big, bold rows, with menu items hidden at the top so they don’t get in the way of reading. Controls for changing text-size are unique and intuitive. Layout of reading page is uncluttered and pristine.

UI Highlights: A classic style, with subtle textures and slight values of brown keep this app warm and inviting. From the subtle fade on the font-slider to the choice Hoefler & Frere-Jones fonts throughout, this app is the best way to read content on a consistent basis.

Dropbox

UX Highlights: Human Interface Guideline is friendly all the way. They keep it simple and it works.

UI Highlights: Custom illustrators for each of the sections before you’ve added anything into the mix. Clean use of icons and the strength to remain reserved when other uploading applications go overboard with visuals.

TuneIn

UX Highlights: Easy to understand icons and straight forward usage of the list view. Layout of the radio station page is great, with many features right at your fingertips.

UI Highlights: Use of warm colors coupled with dark backgrounds and navigation draws the eye directly where it needs to go.

Flipboard

UX Highlights: From the now-classic grid-interface for news consumption, to the pull-down menubar, Flipboard gives you a high-level view of news & information. The “flip-up� paradigm with the interface is useful and entertaining. Keeping text in navigation elements to a minimum means you pay attention to the content instead.

UI Highlights: The moving images when you launch the application coupled with the clean, narrow fonts lets you know this app means business. Inside, the off-white background is easy on the eyes, while the usage of bold, vibrant photographs engage readers. Beautiful tutorial overlays add wonderful polish.

OkCupid

UX Highlights: The slide-up drawer TabBar is a fantastic way to handle multiple options. Large, easy to follow rows and layout make browsing simple. Photo gallery is intuitive and quick.

UI Highlights: Great loading animations, calming, comforting colors (nice to have in a dating app), with a clean, distinctive interface.

Stamped

UX Highlights: The color gradient picker for choosing your stamp color stands out as particularly amazing. The large new stamp button in the TabBar is to-the-point, and the simple icon-based filter works flawlessly with its pop-over tool tip.

UI Highlights: Subtle shades of white and gray, with splashes of color where they are needed. The large, narrow font helps Stamped stand out from most other check-in apps. Great animations and tons of style.

The Fancy

UX Highlights: A simple, elegant design that puts an emphasis on ease of navigation. Tapping the menu button in the upper left-hand corner of the screen will bring up a list of options. The browse button splits all ‘Fancied’ items into categories.

UI Highlights: Pleasant light blue and white theme. A selection of products can be purchased directly through the app’s effortless process.

To Conclude

The key with creative design is not to go overboard. The size of mobile screens ensures that every element counts, no matter how tiny. To make an app successful, each one of those elements has to be both beautiful and useful. What are your thoughts on the mobile app user experience? What are some of your favorite mobile apps that fit these criteria?

(rb)

“Oh hai Smashing Magazine!� That’s one of the dozen ways that Flickr welcomes its users upon signing in every time. It’s an easily overlooked detail, one that the service would work without flawlessly. Yet this detail is a big part of Flickr’s particular design character that would be missed if it wasn’t there.

This is how Flickr greets its users, changing the language upon every sign-in.

These easily overlooked details are the ones that I’m particularly interested in because of the reaction they are capable of causing in users. These details trigger an emotional response, and if used purposefully and fittingly, they will help to form a personality that people will respond to positively when interacting with the product. This positive attitude will often lead to people sharing and even advocating for your product with their peers. This technique of connecting with users on a personal level is also referred to as “emotional design.�

A Little Theory

The term “emotional design� was defined by (among others) Aarron Walter. In his book Designing for Emotion, he describes emotional design by building on Maslow’s famous hierarchy of human needs, which posits that humans need to achieve elementary states of being, such as health and safety, before they can start thinking about higher-level needs, such as self-actualization. People who are seriously ill or lack safety would find it difficult to think about self-actualization as expressed, for example, in morality, creativity and problem-solving.

Maslow’s hierarchy of human needs (left) and the hierarchy of emotional design (right). (Image: Aarron Walter)

According to this theory, a product has to be functional, reliable and usable (in that order) before a layer of pleasure can be applied. Emotional design, then, is the pleasurable layer that you put on top of a functional, reliable and usable product.

An effective emotional design strategy has two aspects:

1. You create something unique that transcends your own style and that evokes a positive response in users;
2. You consistently use that style until it becomes a body of work, a personality layer.

In this article, we will look at some strategies you can follow, as well as some examples found in the wild, plus a few projects in which the consistent use of emotional design results in a great personality.

To learn more about the theory of emotion in design, you might be interested in the article “Not Just Pretty: Building Emotion Into Your Websites.�

The Elements Of Emotional Design

The goal is to connect with users and evoke positive emotions. Positive emotions instill positive memories and make users want to interact with your product in the future.

There’s an additional benefit, though. In pleasant, positive situations, people are much more likely to tolerate minor difficulties and irrelevance. While poor design is never excusable, when people are relaxed, the pleasant and pleasurable aspects of a design will make them more forgiving of problems within the interface.

Below is a non-exhaustive list (based on personal observation) of ways to induce these positive emotions. Of course, people will respond to things differently depending on their background, knowledge, etc., but these psychological factors should work in general:

• Positivity
  See the article “What Are the Top 10 Positive Emotions.�
• Surprise
  Do something unexpected and new.
• Uniqueness
  Differ from other products in an interesting way.
• Attention
  Offer incentives, or offer help even if you’re not obliged to.
• Attraction
  We all like attractive people, so build an attractive product.
• Anticipation
  Leak something ahead of the launch.
• Exclusivity
  Offer something exclusive to a select group.
• Be responsive
  Show a reaction to your audience, especially when they’re not expecting it.

Now, let’s see these principles applied to actual products.

Practical Examples Of Emotional Design

Below are some details of emotional design on the Web. We cannot always attribute a particular strategy to it, such as “surprise� or “anticipation.� Sometimes more factors are at play, and people will perceive some things differently.

Remember that just blindly copying these examples will not give your product the personality it needs. Rather, infusing emotional traits into the product thoughtfully will ensure that the personality sticks. Here’s a little test: browse Built With Bootstrap and see which ones you like best.

Mimicking Emotions

Smile

People who enjoy each other’s company tend to mimic each other’s behavior? When someone you like smiles, you generally smile back. This can work on websites, too. The emotional brain is affected by pictures, especially of people, and by stories. Let’s look at one design that tells a story and shows pictures of people.

The Highrise landing page, with real customers.

Highrise shows happy people, along with stories of them using the product. The smiles and testimonials from existing customers are a powerful combination (for proof, read about the A/B testing done on Highrise.) Oh, and don’t forget to cultivate your own personality.

General happiness

Smiles seem to work in highly abstract form as well.

Threadless’ shopping cart shows emotions.

Threadless’ shopping cart is sad when it’s empty, but when you feed it, it becomes happy. This detail will probably make you smile; even if you don’t end up buying anything, you’ll remember it for making you look twice.

User retention

Attention

User retention is another area that requires a lot of attention.

A while ago, if you had tried to unsubscribe from Audible and stated that your device wasn’t compatible with its service, you would be given a code worth $100 to buy a compatible device on Amazon. That’s a powerful surprise that you’ll remember, even if you end up leaving.

Music

Etsy just plays “Every Time You Go Away� by Paul Young if you attempt to unsubscribe from its email newsletter. The song might not stop you from unsubscribing, but you will probably remember it the next time you come across a product on Etsy’s plattform. Or you might think of Etsy whenever you hear Paul Young.

Etsy plays “Every Time You Go Away� by Paul Young when you leave.

Edgy humor

Groupon probably wouldn’t be able to change the mind of someone who is determined to leave its service, but its video definitely fits the playful tone of Groupon’s copy.

Groupon gets edgy.

Copy

Copy is the easiest way to introduce and play with personality. Your website probably has text everywhere, and words communicate a personality very well. Do you want your brand to be playful, stern, comical, hip? Copy can go a long way in defining who you are and who you appeal to.

Levity

In the Everyday app, if you haven’t put images in the library (which are needed in order to play a video), you will get this friendly reminder to take some pictures of your “beautifulâ€� face — one word that completely changes the tone of the message.

Everyday’s onboarding process

Contrast

The “Pssst!…â€� here says it really well — not only visually with all of the “sâ€�-es and the contrasting color, but also aurally when read.

Skitch’s privacy copy

We find the same nice detail on OK Cupid’s website when you specify your location. “Ahh� could mean both “How wonderful� and “Yes, we understand now. Welcome.�

“Ahh, Prague�

Microcopy

Hunch says something you are probably not used to reading. This difference alone could persuade you to go along with them. First, it communicates that the email will be of interest to the user; secondly, it recognizes that spam is evil.

Hunch’s way of assuring prospective users of the safety of their data.

Microcopy 2

Milk’s detail here makes you much more open to subscribing to the newsletter. The approach is the same as the one above; assuring people that they will be contacted only when it really matters. (Note that Milk was recently acquired by Google and so has been shut down.)

Milk promises infrequent emails and teases with early access.

Microcopy 3

Here is another approach from an as-yet-unreleased project of mine. The branding is lighthearted, so I’ve crafted this microcopy to accompany the invitation form. Hopefully, people will be more at ease submitting their address.

This says that your email address is secure with us.

Also, note how the button doesn’t just say “Submit,� but rather “Request an Invite.� This adds a touch of exclusivity to the sign-up form. If you’re interested in this sort of thing, read about Pinterest’s sign-up process.

Error Pages and Downtime

Not many situations are more annoying for a Web user than downtime. It can make users rather upset, especially if they depend on your product. Emotional design helps you steer clear of such offenses. Below are some examples.

Simple change in copy

Flickr says it’s having a massage. It’s not brilliant, but it’s better than an annoying error message.

Flickr is having a massage (Image: Luke Beard)

Say sorry and offer a treat

Here’s a better approach from Flickr. When it experiences more serious problems, it puts up this splash page saying that its tubes are clogged and that it is sorry. But instead of leaving it at that, it set users to a task and offers the winning contestant a valuable pro account.

The competition when Flickr’s tubes are clogged.

Sorry but…

… there are more important things in life. When Tumblr went down recently, it told users that it was already hard at work on resolving the problem. In the next paragraph, it reminded users that there are bigger problems out there than a brief outage and that you could actually do something about them.

Tumblr supports people in need.

Annoyances

Other online annoyances include waiting for a screen to load. But some screens just need time to load. When your app is busy gathering information, consider doing something on the screen, such as displaying a tip.

Hipmunk bridges screens with helpful information.

Humor

CAPTCHAs are a reality in many places today, but that doesn’t mean users have to like them. Heck, they’re an incredible annoyance. Stack Overflow at least explains with a funny graphic why it has to annoy visitors.

Stack Overflow explains why it has to annoy you with a CAPTCHA.

Personalization

Another emotional strategy is to respond to the user’s input. I love when something responds to me without my having to disclose personal details.

The landing page of the Thermo app detects your location and updates the graphics on the left, telling you the temperature of your location.

Thermo detects your location and turns it into something valuable.

You don’t even need that much information about visitors. 37signals demonstrates a simple way to be attentive to visitors, without any knowledge of them whatsoever.

37signals wishes you a happy whatever-day-of-the-week-it-is.

Email Design

Newsletters can be a great tool, but most people want to cut down on noise and get only the most informative and well-produced ones. Newsletters can be worth subscribing to for various reasons: information, exclusive offers, humor, etc.

Telling a story

Zaarly highlights the most interesting “classifieds� in its newsletter. It’ll make you wonder what people come up with on the website and challenge you to use the service more often.

Zaarly highlights its favorite happenings on the website.

Personalization

Not that this is especially innovative, but Quora has enough data to show me stuff that I would enjoy reading. If you have the data, then do your users a service. Speaking of personalization, check out how adding the recipient’s name to an email’s subject line increases conversions.

Quora extends your social graph and suggests reading tailored to you.

Surprise copy

Notification emails are usually all business. But when someone takes time to make something a bit more special, as the notification email below from CD Baby shows, people will go to great lengths to tell others about it. The string “private CD Baby jet� yields over 20,000 results on Google. That’s powerful word of mouth for just a tiny detail.

The copy for CD Baby’s notification email. (Image: The Shifted Librarian)

Storytelling

We all know that stories get people to listen. Some compelling examples are out there of product stories, one of which is Ben the Bodyguard. It’s an iPhone app that protects the personal data on your phone. The app is designed around the character of Ben. Way before it launched, the developer put up a website on which Ben walked the streets as you scrolled down, telling you that he’ll protect your data soon.

Ben the Bodyguard on the teaser page.

This character of Ben, the French bodyguard, is weaved into every bit of the application consistently. It’s almost as if you were entrusting your data to a personal bodyguard.

Notifications from Ben

Easter Eggs

Easter eggs in general are meant to delight users. Even Google, a relatively serious character among online personalities, adds an Easter egg or two to its search engine every now and then.

Google’s “Let it snow� Easter egg

Let it snow

A while back, Google made it snow on its home page. It also let users do a barrel roll.

Easter eggs are usually unrelated to the service. They exist merely to delight or surprise users, to give them a treat just to make them happy. And happy users share.

Mascots

MailChimp has a distinct personality that deserves all of the attention that it has attracted. A few details are worth pointing out.

The joking mascot

A distinctive part in MailChimp’s emotional design is its chimp, which goes by the name of Freddie. Freddie cheers you up when your profile page loads. And every time you reload, a random joke or link is shown.

One of Freddie the Chimp’s random remarks. (Click on the image to see what he’s referring to.)

But note that emotional design like this can be done wrong. Remember the Microsoft Office paperclip helper that got in the way every time you tried to do something? Freddie the Chimp does not get involved; he stays out of your workflow.

Log-In Pages

Even log-in pages can be made interesting. MailChimp’s changes on special days, like Google’s doodle. Check out some of the designs in the dedicated Flickr pool.

One of MailChimp’s custom log-in screens

You don’t even have to do much to be special. Pocket greets you on the log-in screen with a huge background image instead of a dull color.

Pocket’s log-in screen

Attention to Detail and Surprise

Many of the things covered above demonstrate some attention to detail, which is essentially what it all comes down to. The level of attention to detail shows how much you love the product and how much you respect your customers. Check out this spinner in Quip’s recently released app.

Quip’s loading spinner

There is no need for the wings to flap, but I keep reloading just to see it. Remember, though, such details should never be at the expense of usability.

Surprises and attention to detail are everywhere. One big reason for Dropbox’s early buzz was its video, which it posted to Digg as “Google Drive killer coming from MIT startup.� It was carefully crafted for that audience, with a lot of things left to be discovered (including jokes that Diggers would understand and appreciate). More about that period in Dropbox’s growth can be heard in a talk by cofounder Drew Houston.

Keira is hot. An “accidental� status message during the Dropbox demo.

To get inspired with details, check out the great Tumblog Little Big Details.

Three Diverse Examples Of Personality

Up to now, we have looked at various aspects and examples of emotional design. Below are instances of emotional design in different areas: two from websites and one from the app economy.

Example 1: Gidsy (A Marketplace for the Public)

Gidsy is a marketplace for activities run by users. As such, its developers have to worry about broad appeal.

Gidsy’s main color palette is blue and white, a combination known to be liked and trusted. It is no coincidence that Facebook, Twitter, LinkedIn and countless other brands use some shade of blue. While you’re at it, have a look at BaseKit’s infographic about the psychology of color.

Gidsy’s personality is defined by a thoughtful use of vintage images, lighthearted copy and surprise elements.

Convey a feeling: Vintage images can be found all over the website. They are often used to make a point or emphasize an emotion.

Its vintage-styled 404 page epitomizes Gidsy’s design personality.

Surprise: On reaching the footer, you’ll find a call to action, urging you to create a listing for free. Hovering over the wand will launch a rainbow, pointing you in the right direction and surprising you. Measuring how well that particular detail converts visitors into users would be interesting.

The rainbow playfully guides you to a “Learn more� button.

Copy: Simple copy with a bit of humor: “Well, hello gorgeous!� and “Booooom. Your photo was deleted.�

The page on which users upload their avatar.

The page on which users delete images.

These details go a long way to giving a product a friendly personality. But you can also rethink large chunks of text, such as handbooks and manuals. Gidsy has done this in its handbooks section. Handbooks usually are a dull experience — but not this one. It has already generated a lot of buzz and links in the design community, so you might have already seen it. Notice the subtle nod to iA’s Writer app?

Gidsy’s handbook has made it around the Web.

Newsletter: We’ll finish off our look at Gidsy with its recent newsletter, which just hit my inbox as I was about to finish writing this article.

See the tiny “please-reply� email address?

Gidsy has used another vintage shot to emphasize its message. Also, notice the tiny detail of the sender’s email address, please-reply@gidsy.com, a friendly reminder that the company is listening and attends to the smallest of details. (I noticed that another Berlin-based startup started doing it first.)

Example 2: Automattic (General Web Hackery)

Automattic needs no introduction to this audience. It is a perfect example of how to integrate humor into a generally humorless environment: coding. It espouses Matt Mullenweg’s early mantra of “Code is poetry� anywhere it can. Let’s look at what it has done with its Web properties.

Automattic’s “About� page, packed with humor.

Humor: Automattic’s “About� page is a collection of good-natured bios. Mullenweg’s bio is this:

As the Chief BBQ Taste Tester of Automattic, Matt travels the world sampling cuisine and comparing it to the gold standard of Texas BBQ. Although he originally aspired to be a jazz saxophonist, Matt somehow wound up studying economics which took him to Washington D.C.[…]

Sounds like a fun place to work. Isn’t that exactly what most people reading the page would like?

Slogan: Automattic’s slogan is, “We’re much better at writing code than haiku.� This humorous line is what Automattic is all about, and it sets the tone for everything it does.

What Automattic is all about

Microcopy: People notice tiny details. For example, in the footer of WordPress’ home page is a signature that changes every time the page reloads. It says, alternately, that WordPress is “An Automattic [Production],� “An Automattic [Medly],� etc. This little change to the description shows the company’s love for its product.

WordPress is “An Automattic Medley.�

Jetpack is “An Automattic Airline.�

Surprise: On Automattic’s Jetpack website, three jetpacks soar across the screen whenever the page loads, reinforcing the product’s name and exhibiting a love of detail.

Small jetpacks shoot across the background.

Easter egg: One lovely detail is WordPress’ “self-comparison� Easter egg. Instead of removing the possibility of comparing a post’s version with itself, Automattic has built in a little mechanism that turns the page into a gray and white canvas, creating a Matrix-like effect.

WordPress’s self-comparison solution.

So, when you hit that button, accidentally or not, the whole page turns gray and simulates self-destruction mode, Matrix-style. In the end, WordPress reminds you not to let that happen again.

TechFleece has a detailed description of how to find WordPress’ Matrix Easter egg.

Automattic is a great example of how to show personality in a hacker-heavy environment.

Example 3: Clear App (To-Do App for Design-Savvy Users)

Emotional design can turn users into evangelists who share their positive experience with others. People love sharing interesting stories; you just have to give them one.

Consider the recent success of Realmac Software’s to-do app for the iPhone, Clear. It sure isn’t the first to-do app out there, but it cleverly targets iPhone users and designers with a sleek, minimal interface and a few interaction and transition patterns that have not been done yet. It’s the kind of thing that we iOS geeks just drool over.

Anticipation: Realmac published a video before the launch that cleverly raises anticipation of the product. The video spread in some parts of the design community rather quickly.

People’s attention was captured not only by the design, but by some creative treats and surprises.

Playful: The app sets the tone for playing around and having fun.

Setting the tone: “Let’s explore.�

Surprise: On opening the theme settings page, people who have installed the Tweetbot app are greeted with this message and are given an extra Clear theme. Chances are high that people who use Tweetbot love it and would find this to be a welcome surprise.

If you have installed the popular Tweetbot app, you’ll get a bonus theme.

Treat 2: If you follow the Twitter account of one of Clear’s developers, you’ll be awarded another theme for your social behavior. It was a cleverly engineered Easter egg hunt, resulting in an outburst of positive response by people on Twitter who shared their enthusiasm and compared which themes they had acquired and missed.

If you follow one of Clear’s creators, you are rewarded with a theme.

This is one of the best effects of emotional design. Not only will people enjoy using your product more, but they will share their excitement. And here is the proof on Twitter:

Some of the buzz that the bonus theme alone generated on Twitter.

Surprise detail: When your to-do list is empty, Clear offers a tip on how to fill it up.

The second time, however, you are shown a motivational quote:

Final Words On Benefits And Risks

Emotional design is risky. Adopting a lighthearted tone when apologizing for something going wrong might not sit well with everyone. Don’t be afraid, though, to show your personality, as long as it’s geared to the right people. You can’t and don’t want to be everything to everyone.

We haven’t covered instances of emotional design gone bad, but here’s a word of advice: if you do attempt to be funny or quirky, the most important thing is to listen and monitor your users’ reactions. If something doesn’t work, you need to be proactive, apologize and improve. Showing that you’re listening and ready to learn exposes your humanity — putting you right back in emotional territory again.

MailChimp handles the risk of turning people off with an off switch, which it calls “party-pooper mode.�

Switch on “party-pooper mode.�

So, if you really don’t like the chimp, you can disable him. Apparently, not many do.

Or you could do it the other way and make some quirky behavior the non-default state. Facebook has an Easter egg of its own, letting you change the UI’s language to pirate talk. It actually makes me enjoy Facebook a little more.

This is really what it’s all about: helping users to enjoy something more — so much that they’ll share with friends and strangers.

If you’d like to learn more about emotional design, here is a good list of further resources.

Share Your Thoughts

Have you shared something lately that you were excited about because it was different, lovely, surprising, attractive or appealing in some way? Have you built something like that? Let us know in the comments section below!

---

© Simon Schmid for Smashing Magazine, 2012.

Professionally designed and neatly coded templates always make life easier for developers, not only because they save time, but also for the effort they save. Since web development is an ever expanding field, it is important for developers to keep their work up to date with the latest changes. HTML5 and CSS3 templates are there to make your websites future proof and make them even more accessible.

In this round up, we are presenting a brilliant collection of some fresh and free HTML5 and CSS3 templates that you can download today. With these templates, you can also learn how to code your websites in HTML5 and CSS3. So, enjoy looking into this collection we have compiled for you.

The Templates

Template for Powerful Business Startup ( Demo | Download )
The visually pleasing layout is the first thing that catches the attention when you look at this theme, but it’s certainly not the last. Along with cool graphic elements and hand-written typography, this free website template will provide you with the functionality you need for a good start for your online business.

Animated Neoarts ( Demo | Download )
This is a modern and elegantly designed web template suitable for Design/Studio websites. All-in-One page with an animated theme.

Vintage – HTML Template ( Demo | Download )
This is a responsive blog template that comes with a retro touch. You can use this template for a stylish portfolio.

Template for Restaurant Business ( Demo | Download )
This free website template features an attractive and functional design, which is important for attracting visitors’ attention and making the time they spend at your site pleasant. Geared towards a restaurant, this high-grade theme comes with a stylish layout in an elegant color scheme, with a jQuery slider, and a nice gallery for the images you have.

Simpler ( Demo | Download )
As the name indicates, the template is relatively simpler than the other templates presented in this collection. It has a fixed layout which is made in HTML5.

Free Template for Spa Salon with Zoomer Effect ( Demo | Download )
If your business deals with offering a wide variety of beauty services, try this nicely done ready-made template for starting up your project. The pleasant color scheme turns out to be a good background for the wonderful images from your collection. The neatly arranged content blocks in the main part of the theme are intended to present all the necessary information in an effective way.

CSS3 Design One ( Demo | Download )
CSS3 Design One is a simple two column fixed width template, with a jQuery drop-down menu, jQuery image fader and working PHP contact form. It utilizes @font-face, and CSS3 rounded corners / text shadow.

Zen ( Demo | Download )
This free website template is best suited for the personal blog pages. The template has been designed by using HTML5 and looks visually appealing.

Template for Web Design Studio ( Demo | Download )
Though this theme can be used for many other purposes, it was primarily designed for web design studios. It is a user friendly and visually appealing web template.

Caja ( Demo | Download )
This creatively designed web template is ideal for those who want to make certain files available for download on their websites as well as want to showcase their work.

Scenic Photo Two ( Demo | Download )
Scenic Photo Two is a simple two column fixed width template, with a jQuery drop-down menu and scenic photographic background image. With a working PHP contact form, it utilizes lots of CSS3 features.

Watercolor ( Demo | Download )
This template comes with a fixed layout however you can choose from 4 different skins that are available. It is a friendly XHTML/CSS template.

Responsive Brownie ( Demo | Download )
A brilliant responsive HTML5 template aimed at businesses and portfolios.

Simple ( Demo | Download )
Simple is a neat and clean web template that offers more 7 page layouts, jQuery functionality, 2 Cufon fonts to choose from, loads of background patterns, as well as one sprite file image.

Immaculate 2 ( Demo | Download )
This free HTML5 website template is suitable for blogs and personal websites.

Folder ( Demo | Download )
This is a responsive HTML5 template that can be used with any device and browser size without any problem. This is an ideal template for creative showcases and businesses.

PhotoArtWork2 ( Demo | Download )
PhotoArtWork2 comes with 3 different image galleries, a jQuery drop down menu, as well as a functional PHP contact form. This template is suited for photography related and portfolios websites.

Left ( Demo | Download )
This web template is designed in HTML5 and offers more than 6 page layouts with a unique skin system that can create a new skin appearance within minutes.

PhotoArtWork2_reverse ( Demo | Download )
This is another version of PhotoArtWork2 that is a complete web template with easy to customize options.

Muro ( Demo | Download )
This is another brilliantly designed web template that comes with 3 different skins, 7 page layouts as well as jQuery functionality.

Torn ( Demo | Download )
Torn is an XHTML web template that offers 5 pre-defined skins and 7 page layouts along with jQuery functionality.

Template for Horse Club ( Demo | Download )
Horse Club is one of the free website templates created by the Template Monster team.

CSS3 Seascape Two ( Demo | Download )
This template offers a 2 column fixed width template with a jQuery drop down menu, image transitions and PHP contact form.

Photo Style Two ( Demo | Download )
Photo Style Two web template also offers a jQuery drop down menu, image fader and PHP contact form.

Template for Business Project ( Demo | Download )
If you want your website to look as efficient and professional as possible then you should opt for this free web template. It focuses on the main points of your business and highlight them to grab the attention of the visitors.

Connoisseur ( Demo | Download )
With this web template, you can easily set your website apart from your competitors. This free website template is suitable for all those websites that pertain to fine arts, cuisine, dining, etc.

More on Page Two

Many more templates await, over on page two. So head on over and check them out!

We love to tell users that they have done something wrong. We have error messages for everything from poorly formatted telephone numbers to incorrect logins. But what about our user’s successes, do we celebrate them? Do we tell them they are doing something right?

It is as important to tell users that they are doing things right, as it is to inform them when they make a mistake. This kind of positive reinforcement is key to a pleasurable user experience. In this post, I want to explain why positive feedback matters, suggest when it is appropriate and how to integrate it into your website.

We begin by asking why positive reinforcement matters.

Why Positive Reinforcement Matters

Have you ever considered why a majority of us may dislike virtual keyboards? One of the primary reasons is that a virtual keyboard cannot provide the same level of feedback as a physical one.

Virtual keyboard manufacturers have worked hard to provide positive reinforcement using sound and the pop-up keys (such as the ones found on the iPad). However, these do not match the positive feedback one gets from using a physical keyboard. The sounds are annoyingly artificial and virtual keyboards are unable to replicate the tactile feedback of using a physical key.

We tend to dislike virtual keyboards because they cannot provide the same level of feedback as a physical one.

The example of a virtual keyboard illustrates how important it is to provide positive reinforcement for users of our websites. As with virtual keyboards, the lack of positive feedback leaves the user with a less pleasurable experience.

Many users lack confidence (either in their own abilities, or in the reliability of your website). They worry about whether they had done something wrong or whether the website has understood what it was that they wanted to achieve. In many cases this is because they don’t really understand how websites and computers work. The result is that they blame themselves when something goes wrong, presuming that their ignorance has led them to make a mistake.

By providing positive reinforcement we reduce these worries and give the user confidence that everything is going smoothly. This is particularly important for users who lack confidence in their own abilities (for example, the elderly). These users are often perfectly competent. However, because they lack confidence they second guess their decisions, which significantly undermines their experience.

Positive reinforcement does not just give the user confidence that they are doing something right, it also eliminates doubt about whether something has gone wrong. This can prevent a user from undoing something that they have done correctly.

A good example of this is an e-commerce transaction. Have you ever submitted an order to an e-commerce website and been left wondering whether the transaction is being processed because the page was taking longer to load than you expected?

A simple piece of positive reinforcement (such as an update telling the user that the order is still being processed) would resolve this problem, and prevents people from hitting the back button.

By keeping the user up-to-date you reduce their anxiety that something has gone wrong.

All of this doubt and confusion significantly slows the user down. They find themselves re-entering data, re-submitting forms and constantly using the back button. A small amount of positive reinforcement will significantly increase the speed with which they complete tasks.

With the benefits of positive feedback clear, when should we use it? When does the user need encouragement that they aren’t making mistakes and that the website is doing what they expect?

When Positive Reinforcement Is Required

The most obvious place to provide positive reinforcement is when a user is entering data. Whether registering, logging in, making a purchase, posting a comment, updating a status, or interacting with a Web application, data entry accounts for a large proportion of our interactions online.

It also represents the greatest likelihood of error, and users know this. As a result they often lack confidence in their data entry skills, and need some reassurance. This is especially true when entering data such as email addresses, passwords and postal codes.

Graze speeds up the process of completing their signup form by showing a tick when you complete a field correctly.

Data entry is not the only (or even most common) form of user interaction—users interact with your website every time they click on a link. It surprises me how many websites fail to show the user that they have successfully clicked on a link, yet instead, rely on the browser to provide feedback.

Smashing Magazine leaves the user with no doubt that a link has been successfully clicked (screenshot of Monthly Desktop Wallpapers).

Relying on the browser to provide positive feedback can be problematic as the user may miss it. This is because the browser shows that it is loading a page using the address bar, while the user’s attention is on the link that they have just clicked. This can lead to the user clicking on the same link again.

If the user is looking at a link, they may miss updates in the address bar.

The problem of feedback and attention being in two different places extends beyond links. There are many situations when a user’s interaction results in something changing elsewhere on the page. These kinds of changes are easily missed and some more obvious feedback is often required.

A common example of this would be adding an item to a shopping basket. Because the user’s focus is on the item they are adding, it can be easy for them to miss the basket updating. In such situations it is necessary to update the item itself to show it has been added.

When an item is being added into the basket on the Wiltshire Farm Foods’ website, the appearance of the product changes significantly.

Not that this is just an issue of distance between focus and the change on the page, it is also one of subtly. For example, a basket updating could be as subtle as a number incrementing from one item to two. This is easy to miss, even if the user’s attention is in the right place.

When a user’s interaction triggers a subtle page update, it is often necessary to provide some stronger feedback to reassure the user that their action has had the desired result.

How you provide that positive reinforcement will vary from website to website. There are a number of different approaches you may wish to consider…

Ways To Implement Positive Reinforcement

When a user makes a mistake, we normally inform them by displaying a textual error message. It is therefore unsurprising, that when we think of providing positive feedback, we also turn to textual messaging.

However, I believe we should be careful when providing positive feedback in a textual form. The problem with this approach is that text forces the user to shift their attention and read the message. This slows down the completion of their task rather than encouraging them to move forward.

That said, there are occasions when text can be effective for providing positive reinforcement. For example, if the user has just clicked an “add to basket” button, it may be appropriate to re-label the button to read “add another”. By changing the text you make it clear that one item has already been added, and encourages the user to move on to the next task. The other benefit to this approach is that the user is seeing a change where they are currently looking (the button that they have just clicked) rather than elsewhere on the screen (such as the basket, which they might miss).

Changing the labelling on an add to basket button can bring clarity to a user’s interaction.

Visual Feedback

If we are going to limit the use of text as a method of positive feedback, a better alternative is to use design signals. These could include changes in imagery, styling, color, or size.

Examples may include altering the color of a link when clicked, adding a tick after a field that has been correctly completed, or highlighting an updated portion of the page.

An important example of this kind of positive design feedback would be the cursor state. Users have come to expect the cursor to change into a hand when they rollover an interactive element (such as a link or a button). When it fails to do so, the absence of this positive feedback causes confusion. Yet, despite this well known behavior, too many interactive elements on websites do not demonstrate this behavior.

Without this cursor state, a user may be unsure whether they can click this box.

Feedback Using Animation

Another visual way to provide positive feedback is through animation. There are some great examples of how subtle animation can draw a user’s attention to an error (like the slight vibration you see if you enter the wrong log-in details for WordPress). These same principles can be applied to positive feedback, as well.

A common example of using animation to provide positive feedback would be when users click on an anchor link. By default this jumps the user down the page which can be a very disconcerting experience. However, a smooth scrolling animation combined with a highlighting of the destination can make it clear that what the user had expected has actually happened.

Animation can also be used on e-commerce websites to indicate an item has been added to a basket. Whether it is the basket expanding (to show the new item) or the product physically ‘flying’ towards the basket, these animations reassure the user that their intended action has been completed.

Animation can be a useful tool to show that an action has been completed.

I believe animation is an under-utilized way of providing positive feedback and is something we should be exploring further on our websites. However, it is not the only method that is under-utilized—there is also the use of audio.

Audio Feedback

Do you wait for that “whoosh” noise when you send an email? That is an audible signal that the email has sent successfully. What about those little pings, beeps and twerps that notify you that something has happened on your computer or mobile device? Whether we realize it or not, most of us are reliant on this kind of audio feedback that reassures us that an action has happened.

When sending an email we are very reliant on the audible feedback to ensure us that it has been sent.

Why then do we shy away from using audio on our websites? Audio is an excellent tool for providing positive feedback and yet few websites use it.

Maybe our reluctance is because audio can be annoying. The history of the Web is littered with examples of annoying audio loops or background music that you cannot mute. However, you could equally argue that the Web is littered with bad design and animation (but still, that doesn’t stop us from using these tools).

Others may argue that audio is not appropriate in a work environment. Although I would generally agree, the audio we are talking about using here is no different to the audio notifications used by a plethora of desktop applications that are common in an office environment.

An audible click is a great way to tell a user they have clicked on a link. A “cha-ching” would be the perfect way of letting a customer know they have added something to a shopping cart. Audio is a powerful tool that we are currently under-utilizing.

Much To Learn And Discuss

Whether you use audio, design, animation, or text, we should be providing users with more positive feedback for their actions. It gives a user confidence that in turn increases the speed in which they move through your website (and their level of satisfaction). We have still have much to learn about how to provide positive feedback for users, and we would be especially interested to hear your thoughts in the comments below.

• Is audio a good tool for feedback?
• What examples of positive feedback have inspired you?
• Do you perceive dangers in providing too much feedback to users?

Let us know your thoughts!

(jvb) (il)

Image used on front page is owned by opensourceway.

---

© Paul Boag for Smashing Magazine, 2012.

There aren’t many video game characters that are in the consciousness of the general public, however Mario certainly has made great strides in this area. It’s rare to meet someone who has not heard of the Italian plumber named Mario, but those who don’t play video games often may be unaware of his humble beginnings.

Mario was not the main character in his first video game appearance. You may be surprised to know that he wasn’t a plumber, and his name wasn’t Mario either. He made his first appearance in the 1981 pioneering Nintendo arcade game Donkey Kong. Mario’s character was called ‘Jumpman’ and he was a carpenter rather than a plumber. ‘Jumpman’ had to jump over barrels that were being thrown by Donkey Kong in order to save a damsel in distress (which would later be called Princess).

Since those small beginnings, Mario has come a long way. Over the last 30 years Mario has appeared in more than 200 video games and has been referenced in hundreds more Nintendo and non-Nintendo titles. Today we’d like to show you the changes Mario has went through since his humble beginnings over 30 years ago.

The Evolution of Mario

1. Donkey Kong (Arcade) – 1981

Who would have thought that ‘Jumpman’ would go from being a minor character in this game, to being the most successful character in video game history? Even in Mario’s first appearance, most of his trademark looks were there. Including the red hat, tradesman jumpsuit and famous Italian moustache.

2. Donkey Kong (Game & Watch) – 1982

Before Nintendo ruled the world of portable gaming with the Nintendo Gameboy, they had a lot of success with their ‘Game & Watch’ range of handheld games. Mario’s second appearance was in the port of the popular arcade game that was released the year before.

Game & Watch games had a fixed background which allowed the user to take Mario from the bottom screen to the top. Mario is almost recognizable in the game though this has more to do with the limitations of the Game & Watch system.

Photo Credit

3. Donkey Kong Jr (Arcade) – 1982

Mario returned in the follow up to Donkey Kong in 1982. The Jumpman moniker was replaced with Mario for this game. Graphics were slightly improved this time around, and Mario was noticeably larger in comparison to Donkey Kong and the background. Apart from his size, the Mario sprite hadn’t really changed in any way.

4. Mario Bros. (Arcade) – 1983

The simple yet addictive Mario Bros was the first game of which Mario was the star. Of course, he had to share the limelight with his brother Luigi, a new character that used green clothing where Mario used red (though they were identical apart from that). Mario himself had changed slightly since his last venture, most notably his nose was a little less protruded.

5. Mario’s Cement Factory (Game & Watch) – 1983

Mario’s Cement Factory was the first Game & Watch game to have Mario as the star. Mario himself was unchanged since his last appearance in the handheld environment.

Photo Credit

6. Pinball (NES) – 1984

Mario was frequently used on the cover of NES games, even when he had very little to do with the actual game. In Pinball, Mario was used on the front cover of the game though his appearance in the game was limited to the bonus stage.

7. Super Mario Bros. (NES) – 1985

The game that defined Mario and created a video game mega star. Mario initially started the game small however by taking a mushroom he would grow to double the size. This essentially gave you an extra life as when you were hurt as large Mario you simply reverted back to small Mario. Players could also change into fire Mario by collecting the fire flower. In addition to making Mario bigger, this power up also allowed him to kill enemies using fireballs.

8. Golf (NES) – 1985

Golf was a simple golf game that was highly playable. It was pioneering in many ways as it introduced the power and accuracy bar that has been used in most golf games since.

In the game, Mario resembled a fat middle aged man with a big nose. The design of Mario was bizarre to say the least.

9. Wrecking Crew (NES) – 1985

In Wrecking Crew, Mario donned a safety helmet and a sledgehammer. His skin color was slightly different from other games, though the actual design of Mario wasn’t too different from Super Mario Bros.

10. Super Mario Bros. (Game & Watch) – 1986

Super Mario Bros was brought to Game & Watch in 1986. This time the character looked more like Mario from its console namesake.

11. Mario Bros. II (Commodore 64) – 1987

The sequel to the original Mario Bros was only released on the Commodore 64 and bore little resemblance to the original game. Due to the Commodore 64 being less powerful than the NES, Mario & Luigi were not as defined as in their console games.

12. Punch-Out!! (NES) – 1987

Little Mac was the star of the popular game Punch Out though Mario was still able to play a part as the referee. Like Golf, Mario looked a little more human in the game. His stomach was fairly big again too!

13. Super Mario Bros. 2 (NES) – 1988

After Nintendo decided that the sequel to Super Mario Bros that was released in Japan was too difficult for American gamers, they adapted the Japanese game Yume Kojo: Doki Doki Panic and re-branded it as Super Mario Bros 2. Due to this, the game didn’t feel the same as other Mario games.

This was the first game in which Luigi was not the same as Mario except with different colors. Mario’s brother was noticeably taller, giving the ability to jump higher than Mario. Mario could run faster though.

14. Super Mario Bros. 3 (NES) – 1988

Regarded as one of the best video games of all time, Super Mario Bros. 3 saw Mario being given a lot of new powers. In addition to the super mushroom and fire flower power ups, it introduced the raccoon suit for flying, frog suit for swimming and hammer suit for throwing hammers. A similar suit to the raccoon suit was the tanooki suit. It also allowed Mario and Luigi to fly, however they could also turn themselves into stone to avoid being seen by enemies.

15. Super Mario Land (Gameboy) – 1989

Mario’s first adventure on the Gameboy was based on the original Super Mario Bros that was released 4 years before. Whilst it shares the same style and Mario uses the same power ups etc, all of the levels are completely different.

16. Super Mario World (Super Nes) – 1990

Super Mario World was the fourth title in the Super Mario Bros series. Mario had mainly appeared in NES games for the several years previous to this release and he looked much better in the new Super NES system. Colors were brighter, bolder and more defined.

The game featured a feather power up that allowed Mario to fly. It worked in a similar way to the raccoon suit in Super Mario Bros 3 however the cape allowed Mario to fly up and down and then make a crash landing. The game also introduced Mario’s friend Yoshi, a friendly dinosaur that could eat berries and shoot out flames.

17. Dr. Mario (NES) – 1990

Dr. Mario was a popular Tetris like puzzle game that featured Mario dropping medicine down to eliminate viruses. Despite the game being named after him, Mario was only represented at the side of the game as a Doctor.

18. NES Open Tournament Golf (NES) – 1991

Mario looked a lot better when he returned for his second golf game for the NES. Luigi could be chosen as a second character and Princess Peach and Princess Daisy were used as caddies. The game also featured a cameo appearance by Donkey Kong.

Photo Credit

19. Yoshi (NES) – 1991

Graphically similar to Dr. Mario, Yoshi was a puzzle game that featured lots of common Mario enemies. Mario was controlled by the player and could switch around to ensure the enemies fall into the correct places.

20. Super Mario Kart (Super NES) – 1992

Another Mario game that is regarded by many as one of the best console games of all time. Super Mario Kart featured lots of characters from the Mario world such as Mario, Luigi, Donkey Kong Jr and Bowser. Each character had different strengths and weaknesses for driving and players that weren’t controlled by humans had their own special powers e.g. Donkey Kong Jr threw bananas.

21. Mario Paint (Super Nes) – 1992

Mario Paint was an interesting game that came packaged with the SNES mouse. The game allowed you to create drawings and music within the game and save it for later. Mario appeared throughout the game in a variety of ways. For example, in the music generator he would jump along on top of the beats.

Photo Credit

22. Mario is Missing! (Super NES) – 1992

As the game title suggests, Mario is missing, therefore his brother Luigi took centre stage in this educational game. The game bears a striking resemblance to the graphics used in Super Mario World.

23. Super Mario All-Stars (Super NES) – 1993

Also known as Super Mario Collection, Super Mario All-Stars contained Super Mario Bros 1, 2 and 3. The original Super Mario Bros 2 that was only released in Japan was included as well and was referred to as ‘Super Mario Bros.: The Lost Levels ‘. A later version of the game also included Super Mario World.

All of the games had been visually enhanced to take advantage of the 16 bit graphics the Super Nes offered. Other than that, the games were identical to the original NES equivalents.

24. Mario & Wario (Super NES) – 1993

The 1993 side scrolling game Mario & Wario was only released in Japan. Users had to take Mario through each level avoiding obstacles using the SNES mouse accessory.

Photo Credit

25. Hotel Mario (CD-i) – 1994

Another Mario themed puzzle game that has the unfortunate tag of one of the worst Mario games ever released. The cut scenes featuring Mario and Luigi used full motion video.

26. Donkey Kong (Gameboy) – 1994

The first game to be designed with the SNES Super Game Boy peripheral, it is perhaps surprising that one of Nintendo’s flagship games was not released until 5 years after the Gameboy was first launched. The player had to guide Mario through a whopping 101 levels in order to save Pauline from Donkey Kong. The game play is very similar to the original Donkey Kong games released in the arcades.

Photo Credit

More on Page 2

Mario’s evolution is far from complete! Check out the rest of his gaming career highlights over on page two