Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 25 2014

07:30

December 22 2013

02:12

Bringing Design and Research Closer Together

Emma Boulton maintains that better research leads to better design and shows how research can solve common problems during a project’s life cycle. Santa does his research well every year — let’s hope you’ve been good this year…

Tags: UX design

July 21 2013

09:00

Progression.js: jQuery Plugin Takes the Pain out of Inescapable Web Forms


  

From the UK, West Yorkshire county, city of Leeds stems a fresh jQuery plugin, that promises to help visitors fill out web forms by assisting them and providing progress updates. This is the more helpful the longer a form gets – and we all know, web forms can get reeaaallly looong. Two data attributes, added to the form fields, care for keeping track of where the visitor is and what he is supposed to do there.

May 24 2013

18:03

The Perfect User Interface: GoodUI Equips Web Designers with Solid Marketing Knowledge


  
goodui-w550

Jakub Linowski, UI designer from Toronto, Canada, is used to be working for the bigger brands. He obviously possesses knowledge not only in the field of webdesign craftsmanship but also in the field of marketing. The latter is what he conveys through his side project GoodUI.org. If you are a web designer interested in maximum conversion aka massive sales, you should definitely care for obeying what Linowski teaches you. Not each and every tip will be a fit to every project, though. Just as it is in real life, if the shoe fits, wear it. If not, don't...

April 26 2013

10:50

Web Developer Checklist and Userium: 2 Useful Helpers for Oblivious Web Developers


  
checklists-f1-w550

I'll admit, you need not be oblivious to benefit from the two services I am about to introduce you to. It is not easy to keep proper track of all important aspects of clean and modern web design. I'm sure you will have created your own notes, hints, checklists as your experience developed throughout the years. In my case only the painful experiences made me jot things down for future reference. Today's article shows you Userium and Web Developer Checklist. The two can help developers with lesser experience, yet still be of value to more experienced ones who declare themselves a notes grouch.

July 19 2012

08:13

The Importance of Creative Design For Mobile App User Experience


  

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)

May 24 2012

13:30

Comics and UX, Part 2: Flow and Content

Comickers have long known the secrets of visual storytelling, and there is much we in UX can learn from them. Earlier this week I shared basic techniques comickers use to craft stories and lead their readers’ eyes. Today I will show you how to master flow and control the perceptions of your readers, how visual metaphor in UI can bridge language barriers, and why our definition of “content” needs revision.

Note: In this article, I will use “reader” when referring to people who would read comics and/or visit web sites, and I will use “user” to refer only to people in the context of visiting web sites.

We already covered grouping, proximity, pacing, and balance. Each of these is powerful enough on its own, but when combined masterfully, they allow you to control a reader’s perceptions. I’m going to show you how to weave these disparate pieces together to build a better experience for your users.

Flow

Taken together, all of the elements of cartooning create something called flow. A master of flow can make readers’ eyes dance across the page, even in unconventional directions.

Left to their own devices, eyes want to travel in a downward slanting direction across pages. This is why ad magazines have “v” shaped layouts. This is really only good for scanning. Both web designers and comickers don’t want readers to scan, we want them to digest, to understand, to listen with their eyes.

While there are very few rules in comics, one is that the Western reader’s eye always starts in the upper left side of the page. If there is no panel there, the eye moves downward and to the right in search of a place to start.

Illustration for Of Github and Pull Requests.

Using the above techniques, you can coerce the reader’s eye to take unconventional paths.

Comicking techniques in action

Now that you know the basics, let’s put these babies to use! We’re going to start by looking at some fairly high-level implementations where we can use visuals to replace words before moving on to show how proximity, temporal spacing, balance and flow can be used directly in a design.

Internationalization

An excerpt from an IKEA instruction manual.

When you rely more on visuals than text, your work can be understood across language barriers. Art is a universal language, and that’s why we see it used so much in international publications or handbooks like IKEA’s above. There’s even a set of international road signs used by countries complying with the Vienna International Convention. This way, when you cross country borders in Europe you know that there’s a railroad crossing ahead or that you need to keep an eye out for pedestrians– even if you don’t speak the language.

Sourced from the Merriam Webster Visual Dictionary (which is a really cool resource)

You’ll notice that these images are starting to form their own language, a visual vocabulary. They’re becoming symbols, with each symbol embodying a single idea. This is how writing began in Egypt and China. Similarly, it’s how our interfaces evolve.

Visual metaphor

A comic panel becomes an image that suggests an action which can be further simplified into an icon. Would the letters t-r-a-s-h resonate as much as this simple image? Sometimes, a “simple image” describes a complex action. For instance, this icon can mean trash, remove, delete, discard. On a list of favorites, it can mean “unfavorite this and remove it from my sight” – a very complicated concept! But we can use visual shorthand to get it across intuitively.

Real-world examples

Shopping cart inventory screen from Fab.com.

In this shopping cart inventory screenshot, we can see not one but two comic techniques at work: panelling and proximity. Notice how each item has its own box or panel separating it from the other. But also notice how the “your order” box is off on its own on the right, in the last section the user will look to when looking at a page in left-to-right eye movements. This makes sense since the designer wants users to first review their purchases then the information in the “your order” box before clicking “check out.” Imagine how much clunkier this would be if the “your order” box was on the left!

Also notice the “x” buttons in each item’s box. Here we see proximity and visual metaphor at work. The “x” here simply implies “remove” without the need to explicitly state it. The proximity of these removal buttons to the items they remove also lets users know what will be removed.

Dribbble.com’s home page features new submissions from users.

Dribbble.com uses proximity, visual metaphor and panelling as well. The white box that encompasses each “shot” contains three to four icons that show how many views, comments, and favorites the image has and if the image has an attachment. Interestingly, the creator’s name doesn’t appear inside this panel. It appears underneath the panel, but users can infer ownership by proximity. What the name is closest to, it must be related to.

Blue Cross Blue Shield’s home page exemplifies “flow.”

Blue Cross Blue Shield does a great job with their entire home page. It starts with a sweeping establishing shot – lots of space gives the user a chance to pause and absorb the site. The caption pulls them in and the “Shop for Health Insurance” box calls them to action. Right below that, three evenly spaced panels set a stable rhythm for their content, stressing that each article is of equal importance.

This page is a good example of flow, so good that I wanted to show you how easily its layout could be repurposed for a comic.

Content vs. Copy

Will Lieberson, editor at comic publisher Fawcett Publications, stopped by a barber shop late one night. While waiting for a shave, he noticed that a kid next to him reading one of his own comics! But then he realized that the boy was only reading the top panels of every page. When he tried to explain to the youth that you should read a comic’s page from top to bottom to get the whole story, the boy quipped, “I know, but this way is faster!” (citation: Steranko History of Comics, Vol 2, Page 15)

Panel of Fangs of the Fiend found at Stupid Comics

When your words and pictures are fighting each other for dominance – when you fill your page with information that doesn’t further the plot – readers start skimming, also known as scanning.

People don’t read, they scan…right?

Thanks in large part to Jacob Nielsen’s work, it’s a common heuristic that people don’t read pages, they scan them. This is, of course, a drastic oversimplification. We’ve trained readers to skim content by inundating them with terrible, fluffy, poorly prepared and badly placed content.

It’s a natural reaction to bad storytelling to just skip to the good parts.

Consider how our grandparents would pick and choose their reading materials. After carefully choosing their reading material, they sat down to digest their choices in full. They didn’t skim The Great Gatsby. They didn’t glance at the Wall Street Journal. They chose what they wanted to read, and they read it. Works were curated by slews of creators, editors, and reviewers to ensure that when audiences came, they were not disappointed. People would become outraged with creators and publishers over bad content!

It’s not that people have no patience. It’s that the bulk of online content providers have repeatedly failed to provide things worth spending time on. Now users have knee-jerk reactions. As soon as they land on a page, they turn their shields on – deflecting the ads, the talking dogs, the long intros, the fluffy copy – and begin searching for the meat, the ker-pow.

Users are like that little boy, reading the top panels of every page then moving on because life’s too short to slog through your crappy content.

Content strategists and user experience designers have tried to address this observed “people don’t read, they scan!” problem in a myriad of ways by optimizing microcopy, keeping things above the fold, A/B testing calls to action, etc. But we need to remember to keep an eye on the whole experience. Comics would not be the cultural cornerstone they are today if comickers had started optimizing the first panel on every page!

People don’t scan, they look

People aren’t reading web pages from top to bottom, but they are looking at the page. Humans are visual animals first. Images are often the first thing we notice on a page while words add an extra layer of abstraction that your brain has to decode.

I often hear presenters extolling the value of good content. But what they’re actually talking about is often just copy. Copy isn’t the only kind of content!

Back in ye olden days of the World Wide Web, text was the path of least resistance and images were seen as non-semantic and often garish substitutions for meaningful copy. But we’re living in the future now. We have all kinds of accessibility options at our disposal, from WAI-ARIA to HTML5 video’s subtitles to our good old friend alt text. We’re better equipped than ever to plan, design, and measure the effectiveness of visual content.

Content strategists and UX practitioners, I implore you to emulate the authors of the golden age of comics and lean on your graphics specialists. If you’re a one man UX army, remember to use Photoshop or a sketchpad from time to time, and try to stretch your visual communication skills with things like weekly challenges.

Conclusion

Many comickers evolve into storyboard artists and move on to work in cinema or animation. I evolved into a front end developer and UI designer. I still use my skills to communicate with words and pictures, just in a different medium. If you’re going to connect with your audience, you’ve got to learn the art of the flow, you’ve got to guide their eyes, and you can’t do that with mere words alone. Content strategists and copywriters often see the Internet as an endless document comprised of page after page of text and navigation. But I echo the words of Scott McCloud when I say: the Internet is an endless canvas.

Resources and thanks

You can get a better feel for graphic storytelling by reading comics like the fine ones below created by expert comickers:

Thanks to Kurt Busiek for helping me find the barbershop story and to Scott McCloud for putting us in touch.

Check out these classic books by Scott McCloud:

I love talking about sequential art and comics, so drop me a line! @CrowChick, Dribbble, My web ramblings blog.


The post Comics and UX, Part 2: Flow and Content appeared first on UX Booth.

May 22 2012

13:30

Comics and UX, Part 1: Cross-disciplinary Techniques

Comics, cartoons, sequential art. Each of these words implies the same thing: stories told with words and pictures. Much has been written about about how storytelling affects the user experience, but little has been written about how visual storytellers craft that experience. Today, I’m going to share the tricks of the trade that comickers use to lead a reader’s eyes across a page. You can use these techniques to tell stories, sell widgets, promote an idea, help users find what they’re searching for – the possibilities are endless! (And I promise there will be lots of fun comics.)

Note: In this article, I will use “reader” when referring to people who would read comics and/or visit web sites, and I will use “user” to refer only to people in the context of visiting web sites.

Long before I was a web designer, I was “Rachel the Great,” known in high schools around the world for my weekly comic adventures at gURL.com. (I even won an industry award for my work!) When comics could no longer pay the bills, I used my talents to jumpstart a career in web design.

What the flip do comics have to do with web sites? Quite a bit actually. Comics and websites both start as wireframes.

Both mediums tell stories and convey ideas using words and pictures. People will scan boring or confusing sites as well as comics. In both mediums, you have to either pull readers into a narrative or immediately offer up the meatiest part of the content, lest readers skip to the next page.

Because they have so much in common, many basic comic techniques apply equally as well to web pages. Let’s go over them!

Techniques and theory

There is a saying among equestrians: “Control the head, and you control the horse.” A reader’s eye is like a horse: both will roam if left on their own. The reader’s eye wants to gallop madly across the room and look at that shiny thing over there or that iPhone in your hand. Like the Red Queen in Through the Looking Glass, as creators we have to run twice as fast just to keep our readers in one place!

A good comic doesn’t lay itself out. It doesn’t magically fall from the artist’s pen fully-formed onto the Bristol board. There are scripts (content), layouts (wireframes), pencils (mockups), and inks (final designs) to do before the words are finally married to the pictures.

But the difference between a good comic and a great comic can be found in the place between the script and the pencils. Everything else is icing.

Panels: temporal snapshots

Generally speaking, a comic’s panel and frames act as a mini corral for the eye. Readers process each panel individually. Further, we know that everything inside takes place at the same time and at the same place.

Panels also work as a grouping device. Everything within a panel is related to each other, whether they be characters in a scene or random objects.

Excerpt from Beauty Is as Beauty Does, a comic I made for gURL.com

Proximity

Things close to each other seem more related than things farther apart.

Notice how the first panel is a picture of a woman and a boy. In the second panel, they’re a sister and brother or mother and son. The characters are exactly the same in each panel. The only thing that has changed is the distance between them. Your mind naturally infers a relationship based on proximity.

The same goes for panels. The eye naturally “jumps” to the next closest panel, even if it’s not in a “conventional” location or direction, even if the things in the panels don’t seem immediately related. Your brain fills in the gaps and makes inferences about those relationships.

For instance, in the first panel here we see a pair of Nine Inch Nails tickets. In the next panel, we see someone holding two slips of paper. We assume that those aren’t menus or bookmarks or business cards: we assume they’re the tickets!

Spacetime, whitespace, and pacing

As in the universe, so in the comic: time and space are irrevocably linked. Panels set the rhythm and pace of a page.

A comic with panels of equal size at regular intervals “sounds” like a metronome.

Tick tock, tick tock. The pace is neither fast nor slow. It’s like watching a sitcom as compared to a drama or an action film.

You can actually “slow” time in a comic by increasing the distances between elements.

A big splash of whitespace gives the impression of slowed time.

Likewise, many tightly spaced panels give the impression of quickly passing time.

Strong diagonals also give a sense of frenetic energy or an off-kilter situation.

Balancing words and pictures

A common comicker admonition is “show the story, don’t tell the story.” While it is possible to have a comic that consists entirely of pictures, a comic cannot consist solely of words. That would be a novel.

Andy Runton’s “Owly” is an all-ages comic devoid of dialog and text.

A good comicker works to balance words and pictures. Sometimes it makes sense to let words do the heavy lifting, especially when it comes to concepts that are difficult to explain with images, like facts and figures (although infographic artists show us that visuals can help with those, too!). However, when it comes to emotions and abstract concepts, pictures often can convey complex information much more succinctly.

There’s a lot going on in this short comic. A good author could put this scene into words, but it would take much longer for the reader to read and process the scene, whereas with pure visuals, you can digest what’s happening in a few seconds.

A good writer knows what an artist can show for them and leaves them room to do so. Likewise, a good copywriter knows the abilities of their designers and collaborates with them. Would an infographic say this better than a list of numbers? Would a video of the product in use be a good supplement to a step-by-step instruction guide?

Next up: flow and content

Each of these techniques is useful enough on its own, by when you combine them they become downright powerful. In the second, final article of this series we’ll combine these approaches to achieve better flow and more compelling content. See you soon!


The post Comics and UX, Part 1: Cross-disciplinary Techniques appeared first on UX Booth.

March 30 2012

11:00

A Handy Guide to Better User Experience

In simplest terms, UX, also known as user experience or user usability is the way most basic users feel about using an application, a program, a website or anything. User Experience is based on the reactions and responses the user performs and provides. While it can seem related to gaining feedback, it is actually not the same. User Experience is meant to understand and make the user reach the “final goal” which is defined by the owner of the product. Whether this goal is getting the person to subscribe to your newsletter, or make him buy  your new t-shirt, the main goal of the owner is to make the user’s way as easy and hassle free as possible. There are many factors which can influence a user’s experience with your system/product. The following are some of the most important factors.

User’s Previous Experience and State

Image Source

User’s previous experience is probably the most important factor which can negatively affect your user’s experience with your product/system. There is simply no easy way you can teach an old man to play the latest Angry Birds game, if he sees it for the first time in his life. Same goes with user experience. While a lot of internet users are actually pretty familiar with many technologies (considering just the user side, not the internal/developer side), if you come up with something really fancy and awesome, something really unique, that there is no easy way you will get everyone in the audience using it as if they “were playing with it, since young age”. When deciding on any system, you must have the simplicity principle in mind as well. Overuse of elements may crush or lower your user-experience which will eventually lead to a loss of sales/customers etc.

System Properties

Image Source

You shouldn’t even bother about your user experience data if your system isn’t perfect… or at least near-perfection level. After the page has been reloaded, the rate of leavers is about 25% which is actually a quarter of the sales/subscribers/customers you could have achieved! Having a flawless product is really important. Many clicks in order to perform a single action, also force users to leave. No one is interested in browsing 3-4 pages in a row only for watching a video describing your service. The most important key point to keep in mind, regarding your system defections is: “Save their Time, and they will Save Yours”.

Small Details which make Big Differences

Image Source

There are several minor things which tend to create either big successes for you and your product or cause your unavoidable fail. Bounce Rate is a pretty important factor which must be taken into consideration. Bounce Rate refers to visitors who tend to leave the website before making any action, even browsing the homepage. Modern traffic analyzers, such as Google Analytics provide us such data, so we know exactly where is the problem with our system. Maybe you’ve built an extraordinary product, but you haven’t generated any sales which can create a lot of questions. It is very important that we analyze correctly the bounce rate data, so that we know exactly if there is a trouble with the system over-all or any page(s) in particular. Avinash Kaushik, a google analytics specialist says that a 35% bounce rate is concerning where a 50% bounce rate is actually worrying. User targeting is one of the most basic troubles related to bad UX. Incorrect targeting is a basic mistake which must not be performed by anyone who wishes a decent audience. You wouldn’t like to target teenagers to your site for selling car washing solutions or under-ages to websites about alcoholic drinks. This will not only make you lose your money (if you are advertising) but will also mess up all the bounce and traffic rates you may have.

Analyzing UX Elements and Details on Websites

Forms and Fields

Besides buttons, forms tend to be the most used UI elements in any website designs. You can basically see them on any website in any place: header, content area, sidebar, footer. They can be of any type and represent input fields for collecting info (such as subscribe forms), forms for messages, search forms, forms for comments etc. As you already know, our main goal is to make user experience as easy and understandable as possible. This is why, when working with forms, you should always keep in mind a few details which will make your forms more user-friendly and will help your users fill them without any problem.

Use Unified Text Fields

Unified text fields can actually be filled much faster than the regular, non-unified ones. The basic user tends to spend more time performing eye directions and imputing info from the side on regular fields, and in doing so, losing their precious time, which is definitely not our goal.

Plain Search Forms

A “button-less” search form allows users to perform easier searches. Many designers use plain forms for search, because they think that those will fit better into their designs, rather than forms with an addition of a button. It isn’t a good practice simply from the designers’ perspective; using plain/simple search forms actually makes your users perform easier site searches. Rather then imputing their search term by typing, then grabbing the mouse and performing one more click, you just let them skip 2 steps, which is again a time-saver!

Field Confirmations

One of the most UX-unfriendly situations is when you fill out a long form, after hitting refresh you actually realize you’ve imputed some wrong information. That’s where automatic field confirmations come really in handy. These types of confirmations usually flash an error message if the users have left any field blank, or any information is wrong: such as an email address without the ‘@’ symbol.

Navigation

It is a good UX practice to always set your links located on the top of your page, and especially if your navigation bar links open up in the same browser window. It is a well-known fact that you should only set external links to open in a new tab, and never let your internal links open up in a new tab or browser window as it may totally ruin your visitor’s stay on the site. A lot of people prefer links to be opened in the same tab, however, you can make an exception on external links, but never on your internal ones.

The Order of Placing Links in the Nav Bar

You have probably seen that all sites tend to put the “Home” link at the beginning of their navigation bar, and links which require action, such as “Contact Us” at the end of their link “row”. The placing of these links isn’t dummy or random — all of this has a specific logic and the user’s “ease of use” concept in mind. A lot of websites tend to put links in their navigation, either by their importance or by level of information offered. It is a common example to see the “Home” link followed by an “About Us” page because it is the starting point for offering information. The “About Us” page is usually followed by a “Portfolio” page or a “Know the Team” page, which is the 2nd informative page on most sites, after the “About Us”.

Conclusion

The key is to always think about how your users will perform. You should attempt to make their task as easy as possible, save their precious time, and try to achieve the most important goal you have: engage them!

March 28 2012

17:00

Stop Designing User Experience! I Mean It!

User Experience this! User Experience that! Stop it, will you? There’s plenty enough research done about User Experience . Now, can we please start designing? The problem with the Internet is that literally anything can go viral in no time. Same has happened with the keyword User Experience (UX as the nerds call it). Wasn’t aesthetically pleasing design the end goal for every designer? Then, from where did this term UX find place in our brains and how come it dominates our thoughts? Isn’t an aesthetically pleasing design that delights our user enough to keep them riveted?

Well, lots of questions there. I might be acting a bit extreme but I am a bit upset. I am upset with the trend that has forced an average designer to read tons of content about User Experience just to understand whatever it is. For me, UX is totally unrealistic. And whatever is unrealistic cannot be designed. Let me prove my point!

First Things First. What Is User Experience?

Click on the sign up button on any page and it takes you to the signup page which requires minimal user input before registering the user. Well, that is good User Experience. A slow loading webpage is part of UX and an out of location slider is part of UX too. Bad or good, but everything that happens on a website is User Experience.

So, UX is photography, coding, graphics, security, branding, information and design etc. Basically, UX is literally everything.

So, Who Are UX Designers?

Read the pointers above? Now, people who are involved in all those activities and other related activities with respect to that product can be tagged as UX designers. Be it the team lead, the project manager, the graphics designer, the content developer, the think tank team or even the testing team. All of these combine to form a consultancy group of sorts that helps the client to understand the importance of User Experience.

Did you ever stumble upon a client who wanted to focus on User Experience instead of the product? Did anyone ever ask you the question – “Where to find a User Experience Designer?” Well, such situations don’t come up as such terms are designer specific. All that customers look for is, as I always say, aesthetically pleasing design.

User Experience was a term that popped out of somewhere. It must have been some genius web designer with a lot of free time who coined this term. Later on, it grew as it was something new. It helped a lot of designers get a job of a new kind. It helped industries squeeze more money out of their clients. And, it helped writers to write about something which wasn’t heard of before. But, I guess now it is high time that designers take their words back. It is time when designers should give up on the concept of User Experience as it has done nothing new for the design industry. It is time when we stop talking and start concentrating on the aesthetics of a product.

Get It, But Why Not Design User Experience?

Well, I have my reasons. Let me list the most important of them all.

Those who have spent time in the web design industry will agree to the fact that users are very unpredictable. No matter what sort of analysis you perform, at the end of the day you will stumble upon users whom you cannot satisfy. Even when user experience based testing of any web design is done then too results aren’t satisfactory. The reason is very simple. The thought process of users in your dummy testing will never match with the thought process of real-time users. It isn’t really happening no matter how hard you try to immitate the real time user base.

Assume that you are designing a Facebook app which will focus on users from one country. But, what if that app gains fame in other geographical locations? Remember what happened with Orkut? Although Google launched Orkut in the US it garnered all the fame from India and Brazil. Who would have imagined that would happen? If Google knew this then they would surely have designed Orkut especially for India and Brazil.

We will never find out where exactly our hard work will be used and how will it be greeted, if at all greeted! Henceforth, assuming that you can design specifically for User Experience is assuming that you know every user and is a dumb mistake.

Isn’t that self-explanatory? User Experience is a very volatile term in itself. Internet has evolved exponentially in last few years and so has the perception of users towards the Internet. They have become extra vigilant and smart like never before. This results in ever evolving user experience which demands for more.

Now, in such a scenario it becomes impossible for designers to design a product which evolves with the ever evolving user experience. Nobody can design such a product. None! This simply proves the fact that our basic aim should be to design a product which is aesthetically pleasing instead of designing a product which is completely incomplete.

Got It? Now, Start Designing “For” User Experience!

Confused? Well, there is a difference between what I was suggesting before and what I am suggesting now. All that I am asking for is that so-called “UX Designers” should cease to exist. See, I don’t have anything personal against UX designers but I have issues with the concept of UX Design and the way it is used to extract money out of end clients.

Peter Morville’s Facets of UX explain a lot about what User Experience can be. Once you look at the honeycomb above then you will understand what I mean by Designing For UX. There is a subtle difference between Designing UX and Designing for UX but it is important for the ecosystem of the Web Design Industry that designers understand this difference.

Conclusion

Nothing much left to conclude I guess. I might have raised a few eyebrows and shook up some settled UX designers but this is how it is. You just cannot fool the end client just by using some technical terms that have no new meaning. Let us design for the ecosystem of our industry and not for our bank accounts.

March 26 2012

16:00

The Power of Stories for Enhanced User Experience

What ticks Twitter? It is not only the best possible news feed being generated by various Twitter users but also the stories that say it all in 144 characters. Although Internet has helped humans evolve the way they communicate yet the purpose remains the same – to stay in touch, to communicate and to share each other’s stories. How we do it hardly matters nowadays. Today I will discuss how stories have been used over and over in order to attract the attention of consumers and how it can be used to build a brand.

The Emotional Touch

Most of you must have seen this video but for those who haven’t must see it once. It won’t take more than 7 minutes of your precious time and it is worth it. A young girl could silence the delegates of the so-called “legendary” United Nations just by touching their hearts. It was all about connecting emotionally with her listeners and she did just that.

We must understand that most of the times the style in which one describes products on websites is almost mechanical. We have our own set patterns and we foolishly use those patterns to write down various descriptions. It is all about the amount of time one has spent doing the same work over and over. Correct me if I am wrong?

The importance of emotional touch in write-ups (and other forms of media) cannot be understood until and unless one actually gives them a shot. Humanization of communication between a company and the end customer goes far behind user experience. Make it real and involve humans in your stories or otherwise – lose!

In the early days of the personal computer, all the display screens were black and white. When color screens were first introduced, I did not understand their popularity. In those days, color was primarily used either to highlight text or to add superfluous screen decoration. From a cognitive point of view, color added no value that could not be provided with the appropriate use of shading. But despite the fact that the interface community could find no scientific benefit, businesses insisted on buying color monitors. Obviously, color was fulfilling some need, but one we could not measure. In order to understand this phenomenon, I borrowed a color display to use with my computer. After the allocated time, I was convinced that my assessment had been correct — color added no discernible value for everyday work. However, I refused to give up the color display. Although my reasoning told me that color was unimportant, my emotional reaction told me otherwise. ~ Norman, D. A. (2002). Emotion and design: Atrractive things work better.

Quickly, What’s The Connection Between Emotion And Design?

Emotion triggers a surprise response which helps the end consumer connect with the product. We might not understand the importance of emotion as it is almost invisible but emotion does trigger thought and behavior. Underplaying the role of emotion in design (or any other product for that matter) will simply result into a design without a soul.

The emotional touch in a design helps the user understand the credibility of design and the amount of hard work that has gone into the making of that design. Also, it generates a bond of trust between the two entities. On the whole, the emotional touch will instantiate the ease of use for the end-user.

Ethnography and Stories for User Experience

Ethnography has recently started to make its way into the minds of User Experience teams and experts. Dictionary definition of ethnography is “The scientific description of the customs of people and cultures.” Lately, Ethnography made its way into corporate and consumer culture. It is being used to understand the potential buyers for a particular product. It helps one to understand the values, behavior, and motivations that drive a potential end-user. This is where the connectivity of UX with Ethnography erupted.

I am planning to do a completely different article on Ethnography and User Experience but because we are discussing stories and their effect on UX so let me take some space out to co-relate importance of stories in case of Ethnography.

Image via Stockfresh

Stories help companies connect with the end-user and nurture a bond between them. On the other hand Ethnography helps the same companies understand end-user’s daily life style and their thinking pattern. So, the science of Ethnography can use stories and their emotional power in order to connect with end users. This will help the end-user to open up with the target company and strengthen the understanding between the two.

The Importance of Water Cooler Moments

Yeah! They matter. Remember the times (which might have been yesterday for you) when you end up spending more than just a minute around the water cooler at your workplace? Stories discussed around the water cooler at times have enough importance to make or break a business deal. The amount of emotional investment that we do in such stories and their characters helps us connect with such stories.

Image via stock.xchng

What I want you to understand is if your story telling is such that the end consumer is discussing them at the water cooler in his/her company then you have pretty much done your job. In short it is the lasting impression that will make or break your end game. Story telling should be such that users are emotionally able to connect with them. I agree that Water Cooler Moments might not connect with our topic here but it is an important pit stop for your stories and your end consumer.

Summarizing the Advantages of Storytelling

I am not done yet but I hope that I have been able to give you a glimpse of what all storytelling can do and how strong your pitch can be if it is backed by a story that connects with end user. Now, let me quickly go through some of the benefits of story telling that enhances UX:

  • Regenerates dead papers by pushing life in them.
  • Simplifies designer’s perspective and helps him understand the end-user better.
  • Increases understanding between the team which is into UX as it brings everyone on a common platform.
  • Brings out the thoughts of end-user.
  • Accelerates speed of the project.
  • Improves communication between various teams as it is able to connect all of them on one single platform.
  • Value for end-user and profits for company on the whole.

Conclusion

Stories have always played a vital role in our lives since childhood. When we were kids, it was the bed time story that gave our mind the much wanted peace and helped us sleep. We might have grown up physically but still its the stories that help us connect with each other. No wonder why Twitter is ticking and no wonder that User Experience will touch heights once it stands on the pillar of stories that connect people.

February 18 2012

10:00

Why UX Design is like Your Clothes

Even if you gave five people the exact same clothes, none of them would wear the  clothes the exact same way. This is because everybody looks at something in their own unique way, this is just a testament to the creativity every person has inside of them. You’re probably thinking to yourself what in the world does this have to do with UX design, correct?

Well, a website is nothing more than a creatively designed collection of different sections put together to create something aesthetically pleasing. A wardrobe is a collection of different articles of clothing that you put together as fantastic outfits. In short, both are a combination of different items that make a visually pleasing whole. If you’re still a little unsure about this comparison, don’t worry. By the end of this article, everything will make much more sense.

Breaking Things Down First


*Image Credit: hellojenuine

The best, and most practical, thing to always do is to break things down first. So we are first going to relate the basic structure of a website (header, body sections, sidebars, footers, and misc.) to the typical items of clothing one wears everyday. Let’s get started, shall we.

The Header

In any website, there is something about the way the header is designed that decides how well the website as a whole will turn out. If its looks messy, unorganized, wild, and like little thought was put in, the conversion rate for a website with a header like this won’t change at all. It should be pretty obvious where this is heading. In a UX perspective, the header of a website relates directly to ones headwear (which in this discussion can include hair styles).

Everyone has had a bad hair day. Maybe you’re balding or you got a bad haircut and you need to hide it for a while. Well the silver lining to that is the invention of the hat. The proper headgear can make it all better in the blink of an eye.

The Body Sections

Now the body sections of a website are the largest part. This is the area where all the content in a website goes, which is pretty much the whole reason anyone visits a website, at least in an ideal world. Moving on, the body sections connect everything together and the rest of the website is built upon. So with that in mind, the body sections of a website relate to the torso and leg areas. This is like the website version of t-shirts, blouses, tank tops, jeans, skirts, or whatever else is suitable attire for your style and gender.

The Sidebar

The sidebar(s) is the area that sees the most influence from other parts of a website. This is because the size and importance of a sidebar is derived from how the rest of the website is designed. Since the sidebar is the main dependent aspect, and is not always a necessary section but always adds a little something whenever in use, it correlates directly to outerwear(coats, jackets, etc.).

The Footer

There have been studies that show the type of footwear a person wears says a lot about them. The footer and footwear have a stronger relationship than just their names, positioning, and functions. Like the shoes on one’s feet, a footer needs to strong, durable, and stylish all in one. That is a lot of pressure for something at the bottom of a website, but considering that in most cases a footer can make or break a design, it’s quite understandable.

The Miscellaneous (Popups, Overlays, etc.)

The miscellaneous areas of a site are best described as the areas that aren’t really necessary and can hinder the experience of a website if not properly incorporated. However if done correctly, they add to the overall experience of the site. The idea is to keep these unnecessary areas to a minimum and only use them when needed. For this reason, the miscellaneous sections of a website are like jewelry.

In Summary

Since all the sections have been broken down, labeled, and classified, let’s just do a quick review to make sure that everything is understood. The header is the headwear (which for this case includes hair), the body sections are the torso and leg areas (shirts, blouses, sweaters, jeans, skirts, etc.), the sidebar(s)  your outerwear and the footer is the footwear area, and the misc. area is the jewelry.

Deciding Factors


*Image Credit: cmozz

The basic wardrobe structure has been broken down, and the understanding of this relation is pretty much set. There is only one thing missing. What about the deciding factors that determine the wardrobe combination of said broken down sections?

Region

By definition, a region is defined as being an area or division having definable characteristics, but not always fixed boundaries. With this definition in mind, it is safe to say that different industries and/or markets are distinctive clientele regions. Correct? Well for that very reason, the industry (government, education, healthcare, business, etc.) the website one is hired to aid in building will be defined as the region.

Climate

After figuring out the region, there is another important step to take. This of course being finding out the weather of said location. Once the region is identified, finding this out is a breeze. For the most part, every area within a specific region has a general climate characteristic that relates with other areas at all times. Of course there will be slight timely variations for each area, but for the most part what is to be expected can easily be generalized. Isn’t safe to assume that most companies and/or organizations within the same industry will have the same type of content, but with personal variations? For this reason, the content/copy a site showcases is considered the climate.

Applying


*Image Credit: Fuschia Foot

Okay now the relation is understood, the deciding factors are determined, all that is left is to put this new information into practice. To help guide you along applying your new knowledge, take some time to look at this easy to follow example.

Example: The Photographer

So a new client, a freelance wedding photographer, approaches you to design their new portfolio site. From this profession description the deciding factors are quite easy to find. The region in this example is of course weddings, and the climate is wedding photos. Next you need to decide how the design of the website will be handled, or dressed.

Since content wise this site will be nice and breezy, any heavy wardrobe needs shouldn’t be brought here. Below, a sample breakdown is provided:

  • Header: Since the weather is pretty fair, going heavy anywhere on the site is not a priority. All that is required here is a definitive style featuring of course the information we have come to know for a header. This being simply the name/company logo and the navigation menu.
  • Body Sections: It may be good weather, but this area can’t just be blank. This section is reserved for your content of course, things like information about the photographer and photos of their work.
  • Sidebar(s): In this weather situation, adding any extra clothing would just make the wearer uncomfortable if it’s too heavy. So this section is not needed, but can be applied if kept very light.
  • Footer: With everything here going down the minimal path, it only makes sense to continue that here. A strong footer here can include something as simple as a line of bottom links, copyright info, and some social links.
  • Misc.: Although the rest of the clothing currently being worn is leaning toward minimal, a little something extra will really make everything stand out. In this case, things like lightbox overlays in the area showcasing the client’s photos, implementing jQuery to tag the photos by year, part of wedding, and/or angle so that once clicked on only that section shows up, or other things of this nature.

Have any more thoughts? Can the wardrobe strategy you have help?

January 12 2012

05:35

Usability Design for Online Web Forms

Advertise here with BSA


Designers aren’t just creating pleasing graphics for the Internet anymore. As a web designer you need to consider other properties of user interaction and coding. UX design is possibly the most important topic to cover, and this is especially true designing web forms. All webmasters should understand this message.

featured image - Tokyo subway station

Your goal is to offer the simplest path for your users to move from filling out input forms to hitting the submit button. There isn’t a lot of special effects required, although jQuery form plugins have always been a popular topic. In this article I’d like to focus on the user interaction and how each visitor is experiencing your forms. There are techniques you can use to streamline the process which converts to less frustration in your audience.

Keep a Small Focus

I’ve heard dozens of users complaining about signup forms which require too much info. If you’re looking to increase user registrations then you want the form to be as simple to complete as possible. The same goes for newsletter signups and other similar types of input data.

The minimum number of fields will vary depending on your objectives. Registration forms may ask for a username, e-mail address, and 2 password fields. This is certainly reasonable and users looking to signup will be expecting about this length. But consider other signup forms such as the default WordPress style.

Default WordPress signup registration form

Here your visitors are only required a single username and e-mail address. The system then generates a password and sends an e-mail to the given address. This works to reduce original form size and keep spammers at bay. You don’t need to verify your e-mail through a link, but you do need access to your inbox to acquire your new login password!

Perform Actions as Expected

The one thing most users hate is unexpected page activity. You will absolutely want to keep your form behaving in a natural manner, and reduce any JavaScript extras to a minimum – popup guides and Ajax validation are key components. Usable forms shouldn’t be split into multiple columns and spanned across the page. This is just one example of poor technique.

Macbook Keyboard - web and digital keys

Another mistake I run into often is misuse of the tabindex HTML property. This attribute is wonderful from a usability standpoint since your visitors can fill out forms even without a mouse. But if you have these numbered out of order, or only fill out a few input fields then the whole system is thrown off. This is certainly true with signup forms but even more-so with other types of input – especially online shopping carts.

Security is Priority #1

Whether you’re dealing with customer credit card numbers or simple e-mail addresses you should always put website security first. Visitors are trusting your website and backend code to process each form properly and store user data in a secure database.

If possible I recommend using an SSL certificate on your entire domain. This way users won’t just be protected during signup, but their entire viewing session will be protected via https. It can be a bit of work, but some web hosts like Fat Cow will actually aide you in the setup process. It’s certainly not a requirement for every site but it doesn’t hurt to go that extra mile for security. Your users will feel much safer, and it builds a level of trust going forward.

Security Control Room Photo

Additionally don’t fall for some of the more obvious ploys to detect data. Always use a POST data type in your forms unless the information isn’t exactly “private”. GET requests should only be used if the URL structure can benefit from the data(ex. search pages like search.php?q=my+search+terms).

Tokyo Night Traffic

Both of these methods will pass backend data in a similar fashion. But GET data is processed openly in the URL and is susceptible to hijacking. POST data is much more secure, especially behind an HTTPS connection. This fantastic guide by Think Vitamin explains the differences in an easy-to-digest format.

Large, Spacious Inputs

I have listened to a lot of arguments surrounding the sizes of web forms. Standard CMS brands including vBulletin, Joomla!, and Drupal use fairly smaller text sizes for input fields. These are generally default 10px-12px fonts with very little padding.

Diigo signup registration form

The signup form on Diigo has a very spacious layout! You need to alleviate room between the many different input elements. Also bold text lets you know which fields have been entered and which are still untouched. As you highlight each field the form responds with a faint blue tint – just a marker to let you know where your cursor stands.

The classic Digg registration form was designed and built in a very similar way. Twitter’s registration form is also oversized so you can’t miss a beat. They are not afraid to use extra white space which gives prominence to the input fields. Their system of labels is also very unique by setting placeholder text when the field is empty. By dropping the color to a light grey you can easily distinguish between user-added text and the field presets.

Conclusion

There are a whole library of new trends emerging in web design. The newer CSS3 specs are still growing in popularity and we can see these properties in various layouts. Web forms are no different and deserve just as much attention from designers.

I hope these guiding principles behind user experience can invigorate you towards building better web forms. The process of handling backend data can be tricky even with simpler languages like PHP. But with just 1-2 weeks of practice you can likely figure out a system that works for you. Web developers both frontend and backend would do well to learn and understand these paradigms. If you’d like to share ideas on building accessible web forms please let us know your thoughts in the post discussion area.

December 29 2011

05:00

Cognitive Dissonance: Why Your User’s Brains Hurt

Cognitive Dissonance and The Choice Paradox

Cogni-Huh What-O-Nance?

A powerful cause of dissonance is an idea in conflict with a fundamental element of the self-concept, such as “I am a good person” or “I made the right decision”. The anxiety that comes with the possibility of having made a bad decision can lead to rationalization, the tendency to create additional reasons or justifications to support one’s choices. A person who just spent too much money on a new car might decide that the new vehicle is much less likely to break down than his or her old car. This belief may or may not be true, but it would reduce dissonance and make the person feel better. Dissonance can also lead to confirmation bias, the denial of disconfirming evidence, and other ego defense mechanisms.

Options

options-laptops
Everyone likes having options, right? I mean, if there was only one car ever made, regardless of how well it was built, or how cool it looked, there is nothing fun about being forced into a decision.

We want to personalize! We want the red convertible with the tan leather interior and the iPod hook-up, with custom rims. Green just won’t do! It’s this definitive decision that makes us happy, even ecstatic when we find the perfect [insert your idea of perfect here]. However, it is this same choice that can ruin an otherwise perfect experience.

Observed in many cases is the paradox that more choices may lead to a poorer decision or a failure to make a decision at all. It is sometimes theorized to be caused by analysis paralysis, real or perceived, or perhaps from rational ignorance. A number of researchers including Sheena S. Iyengar and Mark R. Lepper have published studies on this phenomenon.[2] This analysis was popularized by Barry Schwartz in his 2004 book, The Paradox of Choice.

I Want More Options… No, You Don’t

We are very busy people, we have schedules to keep, places to be, things to do. We don’t always have a gratuitous amount of time to make an informed decision and rely on what we’re presented with to help us make that choice. User Interface Designers, UX Professionals and hopefully “decision makers” know the value of a persons time, and ensure choices are as simple as possible.

Consumers have been bred to think more is better. We’re all guilty of it in some way or another but the fact is, choice suppresses conversion. We are more likely to be unhappy with our decision if we have too many options to choose from.

If we can not limit the number of options, there needs to be some method to narrow them down. This could be anything from a customer rating system to, putting the most common choice(s) up front.
options

Conclusion and Sources

Sometimes we can’t take away the number of options we’re asking the user to choose from. But we can try and solve for the best possible outcome. By giving the user a means to drill down their choices, or offering up a “Best Value” or “Popular Choice” we help minimize cognitive dissonance thus giving them a richer user experience.

When Choice is Demotivating: Can One Desire Too Much of a Good Thing?
Cognitive Dissonance Wiki
Changing Minds

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)



Cognitive Dissonance: Why Your User’s Brains Hurt

November 08 2011

14:24

An Extensive Guide To Web Form Usability





 



 


Contrary to what you may read, peppering your form with nice buttons, color and typography and plenty of jQuery plugins will not make it usable. Indeed, in doing so, you would be addressing (in an unstructured way) only one third of what constitutes form usability.

In this article, we’ll provide practical guidelines that you can easily follow. These guidelines have been crafted from usability testing, field testing, website tracking, eye tracking, Web analytics and actual complaints made to customer support personnel by disgruntled users.

Why Web Form Usability Is Important

The ISO 9241 standard defines website usability as the “effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments.” When using a website, users have a particular goal. If designed well, the website will meet that goal and align it with the goals of the organization behind the website. Standing between the user’s goal and the organization’s goals is very often a form, because, despite the advances in human-computer interaction, forms remain the predominant form of interaction for users on the Web. In fact, forms are often considered to be the last and most important stage of the journey to the completion of goals.

Let’s clarify this last point by discussing the three main uses of forms. As Luke Wroblewski states in his book Web Form Design: Filling in the Blanks, every form exists for one of three main reasons: commerce, community or productivity. The following table translates each of these reasons into the user and business objectives that lie behind them:

Webform Uses

Uses of forms, based on Luke Wroblewski’s Web Form Design: Filling in the Blanks.

Thus, the relationship between forms and usability have two aspects:

  1. Forms can make a website usable or unusable, because they stand in the way of the user achieving their goal;
  2. Forms need to be usable in order to help the user achieve that goal.

This post will focus on the second point, because a usable form will naturally contribute to the overall usability of the website, hence the first aspect.

The Six Components Of Web Forms

Web forms are a necessity and often a pain point for both designers and users. Over time, users have formed expectations of how a form should look and behave. They typically expect Web forms to have the following six components:

  1. Labels These tell users what the corresponding input fields mean.
  2. Input Fields Input fields enable users to provide feedback. They include text fields, password fields, check boxes, radio buttons, sliders and more.
  3. Actions These are links or buttons that, when pressed by the user, perform an action, such as submitting the form.
  4. Help This provides assistance on how to fill out the form.
  5. Messages Messages give feedback to the user based on their input. They can be positive (such as indicating that the form was submitted successfully) or negative (“The user name you have selected is already taken”).
  6. Validation These measures ensure that the data submitted by the user conforms to acceptable parameters.

Skype’s registration form contains all six components.

Tackling Usability Via Three Aspects Of Forms

Despite differences in layout, functionality and purpose, all forms have three main aspects, as noted by Caroline Jarrett and Gerry Gaffney in their book Forms That Work: Designing Web Forms for Usability:

  1. Relationship Forms establish a relationship between the user and the organization.
  2. Conversation They establish a dialogue between the user and the organization.
  3. Appearance By the way they look, they establish a relationship and a conversation.

For a form to be usable, all three aspects need to be tackled. Let’s look at each aspect in turn to figure out how to make a form truly usable, along with practical guidelines that you can easily follow.

Aspect 1: The Relationship

“No man is an island,” the 17th-century English poet, satirist, lawyer and priest John Donne once said. Indeed, human beings thrive on relationships, be they amorous, friendly, professional or business. A form is a means to establish or enhance a relationship between the user and the organization. When done badly, it can pre-empt or terminate such a relationship.

With this in mind, a number of principles emerge:

  • Relationships are based on trust, so establishing trust in your form is critical. This can be achieved through the logo, imagery, color, typography and wording. The user will feel at ease knowing that the form comes from a sincere organization.
  • Every relationship has a goal, be it love and happiness in a romantic relationship or financial gain in a business relationship. Ask yourself, what is the goal of your form?
  • Base the name of the form on its purpose. That name will inform users what the form is about and why they should fill it in.
  • Just as in a relationship, getting to know the other person is essential. Get to know your users and always consider whether the questions you’re asking are appropriate and, if so, whether they are timely. This will instill a natural flow to your form.
  • Knowing your users will also help you choose appropriate language and remove superfluous text. And it will help you craft an interface that balances your needs and the user’s.
  • Do not ask questions beyond the scope of the form. In a relationship, you would become distrustful of someone who asked questions that were out of place. The same thing happens online. Consult with relevant stakeholders to see what information really is required.
  • Sudden changes in behavior or appearance will make users edgy. Likewise, never introduce sudden changes between forms or between steps in a form.

Debenhams login webform

Know your users. Make it easy for registered users to log in and for new users to register. Debenhams makes this distinction barely noticeable.

Amazon Sign in Form

Amazon, on the other hand, simplifies the process for registered and new customers.

Aspect 2: The Conversation

A form is a conversation. And like a conversation, it represents two-way communication between two parties, in this case, the user and the organization. In fact, the user has filled out the form in order to initiate communication with the organization.

For instance, with a social network, a user would fill out a registration form to inform the organization that they would like to join. In inviting their request (whether automatically or manually), the organization would ask the user a number of questions (in the form of labels), such as their first name, last name, email address and so forth. Upon acceptance (or denial), the company would inform the user of the outcome, thus completing the communication process.

Viewing forms from this perspective yields some useful guidelines:

  • As mentioned, a form is a conversation, not an interrogation. Aggressive wording in labels will make users feel edgy, and (if they do not leave) they will most likely give you the answers that you want to hear, rather than the truth.
  • Order the labels logically, reflecting the natural flow of a conversation. For example, wouldn’t it be weird to ask someone their name only after having asked a number of other questions? More involved questions should come towards the end of the form.
  • Group related information, such as personal details. The flow from one set of questions to the next will better resemble a conversation.

    Yahoo Form 

    Yahoo’s registration form effectively groups related content through purple headings and fine lines.

     

    Constant Contact Form

    While Constant Contact groups related content, it separates the groups too much, which could confuse the user.

  • As in a real conversation, each label should address one topic at a time, helping the user to respond in the corresponding input field.
  • The natural pauses in a conversation will indicate where to introduce white space, how to group labels and whether to break the form up over multiple pages.
  • In any conversation, people get distracted by background noise. So, remove clutter such as banners and unnecessary navigation that might distract users from filling out the form.

    Dropbox Form 

    Dropbox provides a fine example of what a registration form should look like. The white space is effective, and the page uncluttered.

Aspect 3: The Appearance

The appearance or user interface (UI) is central to the usability of a Web form, and there are several guidelines for this. To simplify the discussion, let’s group them into the six components presented earlier.

1. Labels

  • Individual words vs. sentences If the purpose of a label is simple to understand, such as to ask for a name or telephone number, then a word or two should suffice. But a phrase or sentence might be necessary to eliminate ambiguity.

    Amazon Registration

    Amazon’s registration form contains full sentences, whereas individual words would have sufficed.

  • Sentence case vs. title case Should it be “Name and Surname” or “Name and surname”? Sentence case is slightly easier — and thus faster — to follow grammatically than title case. One thing is for sure: never use all caps, or else the form would look unprofessional and be difficult to scan.

    Barnes and Noble Form

    See how difficult it is to quickly scan the labels in Barnes & Noble’s registration form?

  • Colons at the end of labels UI guidelines for some desktop applications and operating systems such as Windows recommend adding colons at the end of form labels. Some designers of online forms adhere to this, primarily because old screen readers mostly rely on the colon symbol to indicate a label. Modern screen readers rely on mark-up (specifically, the label tag). Otherwise, the colon is a matter of preference and neither enhances nor detracts from the form’s usability, as long as the style is consistent.
  • Alignment of labels: top vs. left vs. right Contrary to common advice, above the input field is not always the most usable location for a label. It’s ideal if you want users to fill in the form as fast as possible. But there are times when you’ll want to deliberately slow them down, so that they notice and read the labels attentively. Also, keeping a long form to a single column and making users scroll down the page is better than breaking it up into columns in an attempt to keep everything “above the fold.” Each style of alignment has its advantages and disadvantages:

    Table webform alignment

    *Times retrieved from “Label Placement in Forms” by Matteo Penzo.

    Makeup Geek

    Forms should never consist of more than one column. Notice how easy it is to ignore the column on the right here on Makeup Geek (not to mention the note about “Required fields” at the bottom).

2. Input Fields

  • Type of input field Provide the appropriate type of input field based on what is being requested. Each type of input field has its own characteristics, which users are accustomed to. For instance, use radio buttons if only one option of several is permitted, and check boxes if multiple choices are allowed.
  • Customizing input fields Do not invent new types of input fields. This was common in the early days of Flash websites, and it seems to be making a comeback; I have seen some odd input fields implemented with jQuery. Simple is often the most useful. Keep input fields as close to their unaltered HTML rendering as possible.

    Bit Solutions Form

    Altering the interface of input fields will confuse users.

  • Restricting the format of input fields If you need to restrict the format of data inputted by users, then at least do so in a way that won’t irritate users. For example, instead of displaying MM/DD/YYYY next to a text field for a date, consider using three drop-down fields or, better yet, a calendar control.
  • Mandatory vs. optional fields Clearly distinguish which input fields cannot be left blank by the user. The convention is to use an asterisk (*). Any symbol will do, as long as a legend is visible to indicate what it means (even if it’s an asterisk).

3. Actions

  • Primary vs. secondary actions Primary actions are links and buttons in a form that perform essential “final” functionality, such as “Save” and “Submit.” Secondary actions, such as “Back” and “Cancel,” enable users to retract data that they have entered. If clicked by mistake, secondary actions typically have undesired consequences, so use only primary actions where possible. If you must include secondary actions, give them less visual weight than primary actions.

    Not clearly distinguishing between primary and secondary actions can easily lead to failure. The above action buttons are found at the end of a lengthy form for enrolling in St. Louis Community College. Just imagine pressing the “Reset Form” button by accident.

  • Naming conventions Avoid generic words such as “Submit” for actions, because they give the impression that the form itself is generic. Descriptive words and phrases, such as “Join LinkedIn,” are preferred.

    Coca-Cola Form

    Although Coca-Cola correctly gives more importance to the primary action button, it settles for the generic word “Submit.” “Register with us” would have been more helpful.

4. Help

  • Text to accompany forms Your should never have to explain to users how to fill out a form. If it does not look like a form or it’s too complicated to fill out, then redesigning it is your only option. Accompanying text should be used only where needed, such as to explain why credit card data is being requested or how a birth date will be used or to link to the “Terms and conditions.” Such text tends to be ignored, so make it succinct and easy to read. As a rule of thumb, do not exceed 100 words of explanation (combined).
  • User-triggered and dynamic help Rather than include help text next to each input field, show it only where required. You could show an icon next to an input field that the user can click on when they need help for that field. Even better, show help dynamically when the user clicks into an input field to enter data. Such implementation is becoming more common and is relatively easy to implement with JavaScript libraries such as jQuery.

    Skype Form

    Skype’s registration form contains both user-triggered help (the blue box that is triggered by clicking the question mark) and dynamic help (the suggested user names).

5. Messages

  • Error message This notifies the user that an error has occurred, and it usually prevents them from proceeding further in the form. Emphasize error messages through color (typically red), familiar iconography (such as a warning sign), prominence (typically at the top of the form or beside where the error occurred), large font, or a combination of these.
  • Success message Use this to notify users that they have reached a meaningful milestone in the form. If the form is lengthy, a success message encourages the user to continue filling it out. Like error messages, success messages should be prominent. But they should not hinder the user from continuing.

6. Validation

  • Only where needed Excessive validation is as bad as its complete absence, because it will frustrate users. Restrict validation to confirming key points (such as the availability of a user name), ensuring realistic answers (such as not allowing ages above 130) and suggesting responses where the range of possible data is finite but too long to include in a drop-down menu (such as a country-code prefix).
  • Smart defaults Use smart defaults to make the user’s completion of the form faster and more accurate. For example, pre-select the user’s country based on their IP address. But use these with caution, because users tend to leave pre-selected fields as they are.

    Twitter Form

    Twitter’s registration form uses both dynamic validation (for the name, email address, password and user name) and smart defaults (“Keep me logged in”).

Conclusion The Beginning

The word “conclusion” is not right here. Let this be your starting point to take what I have written about and apply it to your own forms. The good news is that there is much more to say about all this; you can find an abundance of resources on each point made here. For starters, three books are listed below that inspired me when writing this post. As I stated at the beginning, taking shortcuts by only tweaking the UI will not make your forms more usable. What more can I say? The theory is now with you. Go get your hands dirty.

Further Reading

(al)


© Justin Mifsud for Smashing Magazine, 2011.

October 04 2011

14:13

Improve The User Experience By Tracking Errors





 



 


It’s easy to see your top-visited pages, navigation patterns and conversion metrics using visitor-tracking tools like Google Analytics. However, this data doesn’t show the roadblocks that users typically run into on your website. Tracking and optimizing error messages will help you measurably improve your website’s user experience. We’ll walk through how to add error tracking using Google Analytics, with some code snippets. Then, we’ll assemble the data and analyze it to figure out how to improve your error message drop rates.

What To Track

The most helpful errors to track are form-field errors and 404 pages. Form-field errors can be captured after the form’s validation has run; this can be client-side or server-side, as long as you can trigger a Google Analytics event when an error message appears to a user. (We’ll be using Google Analytics in this article, but you can apply these concepts to many visitor-tracking tools, such as Omniture and Performable.)

Form-Field Errors

Forms that allow users to create an account, log in or check out are the places where most visitors will hit stumbling blocks that you are not aware of. Pick pages with forms that have high exit rates or that have high total page views but low unique page views. This could indicate that users are repeatedly trying to submit the form but are encountering problems.

The easiest way to track form-field errors with Google Analytics is to track an event each time a user sees an error message. The specification for _trackEvent is:

_trackEvent(category, action, opt_label, opt_value)

If the form is for signing in and the user submits an incorrect password, I might use the following code:

<script type='text/javascript'>
  _gaq.push(['_trackEvent', 'Error', 'Sign In', 'Incorrect Password']);
</script>

If possible, store the error message’s text as a variable, and call this variable within Google Analytics’ event tracker. This way, as you change the text of the error message over time, you can measure the differences between the versions. For example, in PHP, I might write:

<?php
  $message = 'Incorrect password';
  if ($message) { ?>
  <script type='text/javascript'>
    _gaq.push(['_trackEvent', 'Error', 'Sign In', '<?php echo $message ?>']);
  </script>
<?php } ?>

If it’s possible for the user to receive more than one error message on the page at a time (for example, if they’ve missed more than one field in a form), then you might want to store all of the messages in the same event tracker. Use an array, or concatenate them into the variable that you call in your event tracker. You might see that a user has attempted to skip all of the fields in a form; this could indicate that they are testing the form to see which fields are required and which are optional. You’ll notice this if you have tracked an event that includes all missing fields in the same event. However, storing all of the messages in the same event might prevent you from tracking the effects of individual error messages over time, so begin by tracking each error message separately.

404 Pages

You might already know how many times your 404 page is being viewed, but do you know which URLs the users were trying to reach, or what websites are referring to those URLs? By adding a tracking code to your 404 pages, you can see both. The following snippet will include the URL that generated the 404 error and the URL that linked to that page:

<script type="text/javascript">
  _gaq.push(['_trackEvent', 'Error', '404', 'page: ' + document.location.pathname + document.location.search + ' ref: ' + document.referrer ]);
</script>

Google Analytics Reports

As you track errors as events using Google Analytics, you will find a list of them in your reports under “Event Tracking,” under the “Content” menu. Choose “Categories,” and then start drilling down through your error types.

You can save any of these graphs to your dashboard with the “Add to Dashboard” button at the top of each screen. I find it useful to list the top 404 errors on my dashboard, so that I can see whether anything new has popped up when I log in.

Google Analytics also lets you know of spikes in error messages. The “Intelligence” section allows you to set an alert for when a certain metric reaches a specified threshold. In my case, I want to know when the number of unique 404 errors has increased by more than 20% over the previous day.

In your custom alert, set the alert’s conditions to include “Event Action,” matching your error’s name exactly. In this case, the error name is “404.” Set it to alert you when the “Unique Events” percentage increases by more than 20% over the previous day. Be sure to check the box for the option to receive an email when this alert triggers!

Once you have captured enough data to analyze, start creating these dashboard widgets and alerts in Google Analytics, so that you can make informed decisions on how to improve your website.

How To Analyze Errors

Error messages will help you see in aggregate the most common stumbling blocks for users. Are a lot of users encountering errors with a particular text field? Perhaps the field for the expiration date of their credit card? Or for their email address? You might be surprised by what your users encounter.

Segmenting Data

If your website gets a lot of traffic, consider segmenting the user base to analyze the error messages. Look for groups of users who make up the majority of a certain kind of error event, because there may be something unique about that segment.

“New Visitors” are first-time visitors to your website. They are likely unfamiliar with the typical flow of your navigation and are brand new to your forms and so don’t know what fields are required. “Returning Visitors” will likely be familiar with your website, so they may not have a large impact on error rates (unless you’ve changed something that catches them by surprise).

To change the user segment that you’re looking at, go to your list of error events and click the drop-down menu next to “Advanced Segments.” By selecting “New Visitors” and then hitting “Apply,” the data will update to show only the errors that “New Visitors” have encountered.

Break down your data on error messages according to user segment in order to analyze the data more deeply.

Segmenting users by country can also give more context. I once wrestled with why so many users were triggering error messages for ZIP and postal codes in a form. After organizing the data by country, I saw a high number of errors from one country whose postal-code syntax I hadn’t accounted for in my form’s validation. I fixed the error and saw the error rate for ZIP and postal codes drop.

Check errors by country to see whether any patterns emerge in your error messages.

Referring sources for 404 pages is another way to examine the data. Use the “Filter Event Label” search bar to show errors whose referring source is a particular domain. Searching your own domain first is useful to see which incorrect URLs you can quickly fix on your own website.

Prioritize Issues

After segmenting the data, prioritize the errors that you want to fix. The top priority will be errors that affect a large group of people (i.e. ones that have a high number of unique events). Next, work on the errors that you know you can easily fix. You likely already know the cause of some errors (poor validation, unhelpful error message, etc.), so clean those up. For 404 errors, check which referring links come from your website, and fix those.

Examine 404 errors to see whether any particular referring links can be easily fixed.

Once you’ve cleaned up the errors that are easy to fix, track the new data for at least a week before doing another round of prioritization. Examine what has changed in the top errors and where they come from, and then research the cause of those errors.

Often, forms will need to be made more intuitive to help users avoid error messages. For example, if a lot of users are making mistakes when entering a date, then play with that field. Does your user base prefer drop-down menus for days, months and years? Do they make fewer errors if given a date picker? Are you giving them helpful examples of the syntax they need to follow? Track your changes and measure the rate of error events after each change to see what decreases user error.

Improve Your Error Messages

Improving the text, design and layout of your error messages could decrease the number of repeated errors by users. An error message might not be clear or might be hidden on the page; improve the user experience by testing changes to your error messages.

I prefer A/B testing to compare the effectiveness of error messages and their designs. On one form, I noticed that a number of users were skipping the phone-number field altogether, even though I’d indicated that it was required.

Some of the indicators of a required field that we tested.

After A/B testing different ways to indicate that the field was required and why it was required, we found that the combination of a link and a tooltip helped users recognize the need to fill in their phone number. This solution drastically decreased the rate of errors for this field.

On 404 pages, test out different content on users: link to your most popular pages; present a search form; try humorous content or Easter eggs to lighten the users’ spirits.

As you test different textual and design changes to your error messages, be sure to measure their effectiveness. Examine the following:

  • Total error events, and total events per error message;
  • Unique events per error message;
  • Exit rates on pages with forms and 404 pages.

All of these rates should drop. Ideally, your users should find the website so intuitive that your error event data will represent only those who try to “beat the system.”

Conclusion

To sum up, track error messages and 404 pages as events in Google Analytics, and analyze the top error patterns. Prioritize the causes of errors, and continue to improve your forms and 404 pages to avoid errors altogether. Lastly, test changes in the content and design of error messages to see whether they decrease repeated errors. Improving your forms, 404 pages and error messages will improve your website’s overall user experience.

Additional Resources

(al)


© Lara Swanson for Smashing Magazine, 2011.

13:00

Getting Experience with User Experience

So you know you want to shape the digital user experience of…something. Welcome to life after college. Now what? I often get asked by recent graduates “Where do I even start looking for experience and work?”

If you’re asking that question, then you’re already on the right track. Many UX veterans have changed careers to UX and eased their way into the field. There isn’t much of a clear path for those who are just starting out and have a formal UX related education. The challenge becomes getting a foot in the door and putting those book smarts to work with a career.

The experience you get and the amount you learn is most certainly dependent on your motivation, resourcefulness, and ability to work with others. One of the variables that can help cultivate your skills as a UX Professional is where you choose to incubate your skills.

I have found that the size and type of organization can play a role in the learning experience and growth. Let’s take a close look at how work environments can differ from each other for those looking to start careers in UX.

Start-up

All that money the big boys like Twitter and Facebook made didn’t come without blood, sweat, and caffeine. Get ready for lots of iterating, collaborating, and hat wearing. The workday may not be very structured and there may not be much in the way of a fancy UX lab or conferencing equipment. For someone new to UX, though, this can be a blessing. Startup UX is very grass roots. Gabi Moore sums it up eloquently:

For startups, you really can’t be perfect, you can’t afford all of the specialists that are needed to make a really awesome product. But something is always better than nothing. It’s just a matter of what that something can be.

You improvise user tests in loud cafes, you sketch on napkins, and you make presentations over Skype. Learning the basics and how to use the tools and resources available to you will help you appreciate and understand the fundamentals of user experience.

If you’re working at a start-up, you’ll notice that jobs have a tendency to grow or disappear very quickly, so it’s a good idea to keep in touch with your local user experience and start-up communities. They’ll serve as your mentors and provide a safety net as you grow into your user experience role.

Not only will you work very closely with people of a wide variety of skills, but you will get experience doing lots of things that aren’t strictly UX or even UX related. You’re likely to wear many hats within the company due to the pure lack of bodies to go around. Knowing how the gears of digital projects turn (outside of your own little UX corner) will make you a valuable asset to anyone lucky enough to hire you in the future.

Agency

In an agency, you’ll get good and you’ll get good fast. Agency experience is experience in dog years; although the work has a tendency to come in waves, those waves crash hard and loud. Be ready for long hours and high stress. Thanks to the way you’ll be billing your hours to the clients, you’ll likely be keeping one eye on the clock and the other on the quality of what you’re churning out. And you’ll have to speak to that quality and defend it to clients who don’t know you or your skills very well. You may work on 4 projects at a time, and once they are gone and out the door, that may be the last time you see or think about them.

It’s a little tricky to find an agency with a mentor who has the time to devote to formal training. Instead, you’re more likely to find someone with experience whom you can bounce questions and ideas off of. In most cases, it would benefit you to do as much reading and studying up as you can during the down times.

Though this may sound pretty rough, there are upsides: variety, efficiency, and interpersonal skills that will never become obsolete or out of date. Within a very short period of time, you may find yourself getting very comfortable interfacing with stakeholders, presenting to scary folks in big leather chairs, defending your work, and learning how to compromise (at least with less teeth-gritting than you may otherwise endure).

And speaking of getting comfortable in otherwise difficult situations, you might just find yourself picking up expertise in strange places—get ready to tap into your inner anthropologist. Within a 6-month period I learned the ins and outs of the designer fashion consignment industry all while learning how custom wedding invitations are glued. And it was complicated.

Small company

At a small company, you’ll spend your time with only a few projects, rather than the crashing project waves of an agency. You will get to know them inside and out. The benefit of working on fewer projects for longer periods of time is that you can build on your own research during the product lifecycle. You’ll get the chance to design something, then go back to test and refine. There is no better way to learn than from your own mistakes.

Where user experience has yet to make it into the lifeblood of the company, you’ll get to evangelize the importance of user experience to any outsiders and nonbelievers. You’ll learn how UX fits into the processes of managers, developers, visual designers, and marketers. Within a year you should be pretty good at wireframing, sketching, creating user flows, writing functional specs, and running and applying findings from all types of user testing.

You’re likely to work on a team of people in the same field as you, but with different philosophies and experience to bring to the table and learn from. Collaborating and working alongside like minds is a great way to get your feet wet while keeping a safety net in place for those times you mess up.

With fewer projects comes the risk of getting bored and the feeling that you may be falling behind with trends and new buzzwords. Make sure you love what you’re working on and push yourself to learn new skills.

Medium / large company

A larger company certainly has its advantages over the little guys. Part of the job here is evangelizing good user experience practices while learning how to win small battles. Asserting yourself as an expert (or what I call “UX street cred”) can make your job a joy, and it’s a powerful skill to have in your back pocket. You may get the chance to impact methodology, improve corporate outlook and strategy for user experience, and affect huge projects. Making a difference at a large company is an incredible feeling.

There is usually room for steady growth and more responsibility (as opposed to most “flatter,” smaller companies). The trade off is you may find yourself having to navigate a maze of high school-like politics and drama. One of the common responsibilities of a UX professional at a medium or large sized company is maintaining and being the guardian of human interface guidelines, functional specifications and personas. A lot of best practices should already be in place when you get there, so this is a great place to learn the basics.

Academia / corporate research

Some UXers really enjoy being at the front lines of technological innovation and industry standards with human computer interaction. The research that UX professionals cite to colleagues and clients, the stuff that’s supporting their recommendations, has to come from somewhere… and that somewhere is you. Be ready to get very good at running and facilitating structured and rigorous user tests.

By doing funded research, you’ll probably get access to testing labs and the ability to play with cool new technology years before the neighbor’s kid gets to. Researchers were designing and refining gestural recognition and touch interfaces decades before they made it into the Kinect and iPhone.

If you get a chance to work with students, you may find you learn just as much from them as they learn from you. And the best part? You’ll probably work very close with a professor; who could ask for a better mentor?

Keep in mind, that if you plan to leave this kind of position in the future, you’ll be leaving without gaining valuable experience with client/stakeholder management, presenting, and budgeting time. With the (potentially) flexible hours, this kind of job may pair well with occasional freelance work to make you a well-rounded UX machine (but shhh, don’t tell the brass).

Go forth and make us proud

The scale of and variability between companies and organizations obviously varies, as do the types of experience and work. Naturally, there are exceptions to all of these observations and they really depend on you. No matter how you chose to step into a UX career, there is no replacement for creating your own learning opportunities. That means not stopping when your workday ends, reading anything and everything UX related, and being active in your local and/or online UX community.

Question from the Editor: What kinds of places do you think best help prepare new UXers for a bold and bright career? Let us know in the comments!


Advertise here with BSA

September 27 2011

13:00

Seductive Interaction Design: A UX Booth Book Review

When talk builds about making seductive interactions, it’s nice to have people like Stephen Anderson giving us his two cents. Here are my two cents on his two cents.

When I started studying for my degree in Interactive Media Production, I had never heard of UX and neither, dare I say it, would’ve any of my lecturers. UX wasn’t something that was covered during my 3 years of study. Even as I entered into the fabled World of Work, I’d heard very little of usability, and it seemed most job roles called for designers or developers.

I then began working for a larger agency that had just created a brand new UX team which was tasked with making usable websites. After a few years of success, the team then expanded and begun to employ specialists within the UX, employing UX practitioners, UX consultants and UI designers. This change seemed to bring about a shift of focus from making websites not only usable but also enjoyable to use.

Let’s get seductive

The point I’m taking forever to make is that the web design industry has evolved at a rapid rate. It went from building websites to compete with your competitors to making websites usable and accessible, and now to what we see where information architects, UX designers, interface designers, interaction designers, and all manner of different specialties falling under the umbrella of User Experience.

This explosion of specialists has prompted the industry to flourish, and the knowledge base within it is growing by the day. It now seems to be a given that a website being published today will be usable; however, the new focus is on making websites seductive.

Stephen Anderson has written a wonderful book called Seductive Interaction Design: Creating Playful, Fun, and Effective User Experience that looks at some excellent examples of websites employing seductive design, which doesn’t stop at merely pointing them out, as Stephen explains: “…the actual examples will soon be outdated (or imitated), but the reasons these ideas worked in the first place won’t change.” This is why the book is such a success—it’s not just a book full of examples. It delves into the fundamental psychological theories behind exactly why each of the examples work so well.

That said, Anderson has a warning for anyone who thinks they can just copy these examples and expect them to be a success:

“Adding ‘playful’ elements on top of a frustrating experience will only complicate things.”

It’s all a game…or is it?

It’s always great to be in a position to think about how you can seduce your audience into loving your website or application, but you must first be sure that you’ve got the basics sorted.

One very famous example that gets dissected in the book is the now infamous LinkedIn progress bar. This idea of “gamification” has blown up since their success and it seems that every site has some aspect of gaming added to it at the moment. However, gamification shouldn’t just be added to a site without understanding exactly why certain elements work. There also needs to be a great deal of consideration around exactly what you are “gaming.”

“A game first has to be…engaging…without the points and the badges that get so much attention; a simple reward schedule…however addictive…leads to frustration if people don’t enjoy the activity being reinforced.”

The important point to take from this is that the activity you are trying to add game mechanics to must be in demand by your audience, else any success you see will be short lived. It’s not possible to make a success out of something that is failing through gamification alone—you must solve the underlying problems, which goes back to the earlier point about getting the fundamentals right before looking to seductive interactions.

One important element that Anderson highlights is that the language used in your website needs to fit the personality of the brand. He points out that a lot of forms online today seem to forget that people are being asked to fill them out, and the language being employed is that of a computer and not a conversation between two people.

Role play makes everything better…

There is an excellent, and seemingly obvious (once pointed out), role play exercise that tries to draw attention towards the language being used during a form process. Anderson recommends that you actually have a conversation with someone as if you were asking them for the information that the form is requesting. The technique is excellent at helping you find areas where the language could be friendlier and it also does a good job of highlighting the areas that could pose a problem to the person using the form.

Seductive Interaction Design is an excellent book for people looking to gain a basic understanding of psychology and how these theories are being applied to modern day websites and applications. However, and Steven also quotes these books, if you want an even deeper understanding of psychological theory, I’d highly recommend Predictably Irrational by Dan Ariely and Influence: The Psychology of Persuasion by Robert Cialdini.

Another recommendation I’d make with this book is that you should go and buy the Mental Notes card deck that Anderson created last year. It is an excellent set of cards that summarizes 52 UX theories and are a handy reminder to have with you.

As an end note, I’ve read a few books on Kindle for iPhone and been disappointed with the way it had been converted. However, that isn’t the case with this book. It’s a great conversion and the screenshots have been positioned exactly where you would want them. Having it on my phone means that I will always have it handy whenever I need it. So if you pick it up, don’t be worried about ebook quality.

So what about you? Have you read any books on seductive design lately? Sound off in the comments; we’d love to hear your thoughts.


Advertise here with BSA

August 30 2011

13:00

Personas: Putting the Focus Back on the User

Personas should represent your user base (hopefully not pictured above).

In the art that user experience has become, we talk a lot about not letting our client’s personal preferences get in the way of what would be best for the user. Yet no matter how often we remind our clients and teams of this throughout the design process, we still find that users are unpredictable, and some changes need to be made post-launch to reflect how they actually use the product.

There’s no fool-proof way to avoid this problem, but I do think that we can improve our processes to be more user- and goal-based. No, I’m not talking about doing more studies with users, eye-tracking studies, or heat maps; what we need to do is bring the user into decisions we make from the beginning.

This is easier than it sounds, and a simple way to accomplish this is to incorporate personas into our work. In design circles, a persona is an archetypal representation of a user. The idea is as old as marketing, but Alan Cooper solidified the idea into a design philosophy in 1995, and designers have been using it to improve their user experience ever since.

If you’ve paid any attention to the UX community, especially in the last few years, you’ve likely heard the word “persona” tossed around a lot. From what I’ve seen, however, the number of people specializing in user-centric design who actually implement personas is pretty slim, and the number of designers who make them a pivotal part of the process is even slimmer.

So, what’s a persona?

Put simply, a persona is a representation of a client’s customer. They are fictional characters that we create, and they serve as a reminder of who our users are. Like any good fiction, a well-made persona has its own story to tell. The more believable the story, the better representation the persona is of users; the more accurate the representation, the more likely our decisions will reflect the user’s needs.

Our persona’s “story” consists of a name and photo, title, byline, and, most importantly, his goals and frustrations (or “pain points”). Our job is to meet his goals and solve his frustrations with what we’re building. Ultimately, personas help us make the user’s needs more memorable throughout the process.

Some teams may include stories and more in-depth biographical information to assist in understanding how the user might respond to certain decisions. This may make the personas more realistic, but be careful: people are not necessarily stereotypes, and we don’t want to use personas inappropriately by trying to oversimplify our target demographic users.

Case study: 3Degrees

As I write this article, the team at The Phuse is working on a cool project called 3Degrees. The purpose of the application is to allow users to tap into their existing social networks to find new people through mutual friends.

Based on our client’s research, when we began developing the application there were two basic types of people that would be using it. We worked with the client to create personas of those two users in order to help keep our development on track.

Meet Steve

This is Steve, one of our two personas.

This is one of the personas we created for the 3Degrees project; we put a face and name to our user to make the process more memorable and human.

Our next effort was to write out the goals and frustrations of our new friend. This is the real meat of the persona. By writing them out, we know what goals we have to meet and what frustrations we’re trying to solve.

We know a whole lot about The Goings-On of Steve.

For the 3Degrees project, we also decided to include narratives to make each persona a little more memorable; Keep in mind, though, that this can be tricky. Background information may lend an air of credibility to our persona, but we must be careful not to stereotype.

When do you need a persona?

Any time you’re working with user experience, you should be using personas. In most cases, though, personas are used when there is more than one type of user to keep track of. For example, when working on 3Degrees, we decided that there were two different types of users accessing the site.

Originally, the goal of the 3Degrees project was to connect people moving to different cities. Our client’s research told him that people new to an area (and looking to network online) are generally interested in one of two things: friendships or romantic relationships. Therefore, we decided on two different types of users to satisfy each of those roles: one looking for a date (Steve, above), and another who is looking friend to play tennis with (Ramona, not pictured).

We’ve seen projects with up to five personas. Some projects may have even more. Trying to remember those five user types would be pretty difficult without something to remind us constantly about them. Instead, the personas allow us to refer back to the user(s) at each step of the design process and make sure all their needs are being met.

Think of all the times you get in debates with clients or colleagues about where to place an element, how something should be styled, or whether a feature is needed. These debates can end up getting heated based on people’s egos and their personal opinions on what looks better and how something should be. Personas give us the opportunity to avoid that sort of conflict within design teams and with clients. They help mediate discussions based on the goals of the users.

Instead of saying, “I think the photos should be bigger,” we might say, “Well, Steve will likely be more interested in photos and basic information of other potential matches than how they answered specific questions.” In this way, we’ve given the decision to the user, and explained his reason for making it. Our personal opinions and egos are no longer relevant; only the user’s opinions matter.

Personas have a life too, y’know

In 2010, John Pruitt and Tamara Adlin wrote a book called The Persona Life Cycle, where the author related the creation and use of a persona to the stages in a person’s life. This is a handy way of looking at the life of a persona throughout the project and beyond. For example, there is essential research and planning that goes into their conception to ensure they are being brought into an environment that can nurture their growth. Then, throughout their adulthood, they help us make decisions and grow with the maturity of the project.

Sad zombie persona is sad.

Much like some adolescents, I think personas can feel left out as well. We may not look at them enough, or we might ignore them completely. In fact, we have to be careful, because as Tom Allison says in his UX Cafe presentation, it’s also possible to have these “zombie personas” that lie neglected around our processes. If we don’t use them, they’re no better than the ones that go wholly unrealized.

It takes a village

Now, you might be thinking “well, if I were a person in charge of designing the personas, I’d just make it agree with everything I say.” This is a problem teams suffer from. The importance of a persona is not to represent you, it’s to represent the user, whose goals and frustrations are his or her own.

User experience only works when the people that are developing the product work as a team. It’s not only the designer’s role to come up with a design that is user-focused, but the responsibility must also be taken on by the client and developers.

To paraphrase an ancient African proverb, it takes a village to raise a child. In a similar vein, it takes a team to create a persona. They can’t be created by one person, otherwise they’d be too subjective. We need to have the whole team involved in the process to ensure that personal biases are kept to a minimum. It’s useful to base these personas on real users and not just ones we think might be users, therefore some field study and customer development is always important prior to the persona’s conception.

A great way to embed personas throughout the process is to have different members of the team be responsible for different personas’ goals. That way, when decisions are being made, one team member isn’t trying to figure out if the goals for five personas are being met; five people are weighing in with their thoughts about their specific personas.

Convincing people to use personas

In 2009, Frank Long conducted a study with 9 groups of students from the National College of Art and Design in Dublin that got the groups to use personas and find out how effective they were in their process of creating designs that served the users, with Neilsen’s Usability Heuristics as a base for the scores that were given.

In the study, Long found that the Beta and Gamma teams using personas scored higher on Neilsen’s list than the Alpha team that acted as a control group. In the focus group that concluded the study, group members noted that personas did help guide design decisions, and they were able to clearly recall their persona and its key bits of information.

Goals: Foster world’s sweetest mullet; develop hot lady repellent. Frustrations: Bikes with gears; rules.

While this study isn’t as detailed as some would hope it to be, it does reflect the usefulness of personas as a tool. They don’t take long to build or maintain, so there’s really no harm in taking a bit of time to put them together.

Just ask any team that has used personas in their design process; there is an important role for personas in our workflows, whether they’re 100 percent quantifiable or not.

How important is the user in your design?

We know it’s not fool-proof, but personas give us a way to manage user goals and frustrations before the application launches.

There’s a lot of debate over the need for personas in user experience, and there’s a lot of truth in statements against their use. Ultimately, however, personas are a physical representation to remind us who we’re building for, much like one would have a list to remind oneself of what to buy at the grocery store. When used appropriately, personas can be an invaluable tool in the design of important user experiences.

Once again, personas should always go hand-in-hand with real user interviews and studies, and all the other tricks of the trade that we have come to value so highly like heat maps, eye-tracking studies, and, of course, sets of proven user patterns.

It’s vital to the success of our applications to keep the design process focused on the user experience. How are you keeping the user in mind throughout your process?


Advertise here with BSA

August 23 2011

13:04

New approaches to designing log-in forms

Great read this morning over at Smashing Magazine but Luke Wroblewski exploring examples and practices of form design solutions and user experience.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl