background preloader

UI / UX / Usability

Facebook Twitter

Overcoming Halfhearted User Adoption. In 1996, I was a database developer at AT&T Solutions (now defunct). AT&T Solutions had two separate payroll systems, one for AT&T Solutions and one for AT&T corporate. Both were excruciatingly slow. My colleagues used to joke that we needed a separate accounting code for the time it took to enter our hours into both systems. Being young and cocky, I decided I would ignore the corporate payroll system. This went on for about two months until my boss finally noticed a discrepancy between the two systems. That experience taught me two valuable lessons about user adoption: User adoption is not a binary concept; there are many levels between wholehearted adoption and outright user rejection. Wholehearted user adoption means that users embrace your solution as part of their daily work routine.

On the other hand, outright user rejection is fairly easy to spot. But what’s often just as damaging as outright user rejection (and much harder to recognize) is halfhearted user adoption. Usability. Knowing Why Beats Knowing How | Pleasure & Pain ☯ by Whitney Hess. Last year around this time, I started following an eating plan called The 4-Hour Body by Tim Ferriss. At the same time, I was feverishly traveling the globe presenting my talk Design Principles: The Philosophy of UX. Midway through the book, Tim begins a chapter with a quotation from Ralph Waldo Emerson that draws a surprising parallel between his philosophy on eating right and my philosophy on designing right.

“Without ambition one starts nothing. Without work one finishes nothing. The prize will not be sent to you. You have to win it. . ~ Ralph Waldo Emerson In a few short sentences, Emerson encapsulated exactly why I felt the message of my talk was such a crucial one to tell: In order to figure out how, you need to know why. Put bluntly: strategy always outperforms skill. Purpose makes perfect. This is the theme that exists across all of my talks, especially the one I’ve been giving this year, What’s Your Problem? All the more so, it is the philosophy by which I live my life.

Or as: The Elements Of Navigation. Advertisement When users look for information, they have a goal and are on a mission. Even before you started to read this article, chances are you did because you either had the implicit goal of checking what’s new on Smashing Magazine, or had the explicit goal of finding information about “Navigation Design”. After a couple of seconds of scanning this article, and maybe reading parts of the introduction, you may have started to ask yourself whether the information that you’re consuming at the moment is actually relevant to you—the user.

Unfortunately (and as certain as death and taxes), if users cannot find the information they are looking for, chances are they will abandon their track, never to return. Being the compassionate human being that I am, I’ll try to explain to you what this article is about, so you can make your choice either to continue reading, or not. Words, Words, Words “This might be a good start!”

User-Testing Labels Another test is a Word Association3 game. What Is What. Guide to Website Navigation Design Patterns. In web design, there are certain common design patterns that are used for interaction. Site navigation has a wide variety of common and familiar design patterns that can be used as a foundation for building effective information architecture for a website.

This guide covers popular site navigation design patterns. For each site navigation design pattern, we will discuss its common characteristics, its drawbacks, and when best to use it. Top Horizontal Bar Navigation Top horizontal bar navigation is one of the two most popular kinds of site navigation menu design patterns out there. It’s used most frequently as the primary site navigation menu, and is most commonly located either directly above or directly below the site header of all web pages in a site. The top horizontal bar navigation design pattern is sometimes paired with drop-down menus whereby hovering on a navigation item reveals second-level child navigation items. Common Characteristics of Top Horizontal Bar Navigation Conclusion. Guide to Website Navigation Design Patterns. Top 5 UX (User Experience) Articles of the week - Week 3. Editor's note: Contributor Marcy Kellar is a SharePoint Strategist and User Experience Designer.

Follow her @marcykellar Last summer, Marcy Kellar began a weekly series of her top picks of UX articles for that week. Marcy is going to pick up the series again so we've gone back to publish her original articles. Here are the top 5 UX articles on branding this week: 1 - Guide to Website Navigation Design Patterns In web design, there are certain common design patterns that are used for interaction. Marcy Kellar: This article outlines patterns of navigation that includes description of use andpros/cons. 2 - The Elements Of Navigation | Smashing UX Design This article is about the tiniest of details that goes into creating the main centerpiece of your digital product.

Marcy Kellar: My favorite part of this article is the Six Navigation Design Guidelines found toward the end. 3 - Pleasure and Pain » Knowing Why Beats Knowing How 4 - Overcoming Halfhearted User Adoption | UX Magazine. Good Web Design Is All About The User. It’s easy to get caught up in the private world of web design, spending too much time playing with the latest CSS tricks, or flipping through the coolest design showcases. You start forgetting that your work isn’t all about being on the cutting edge and snagging a web design award or two. The reality is that the latest and greatest design trends are irrelevant, and sometimes even alienating, to the majority of audiences.

Unfortunately, that kind of work is often only appropriate for an audience of other designers, and those projects are rare. So take a step back from trying to one-up your peers, and consider the basics. At the heart of design lies the famous maxim that form follows function. Make sure your work is holding true to that principle by making sure of these three things: Suitability You can still be innovative while working with a more sedate style. The interests of your target audience should always be the overriding consideration in determining the style of your site.

Speed. 4 Reasons Your UX Investment Isn’t Paying Off. Why Distinct Icon Outlines Help Users Scan Faster. By anthony on 08/04/11 at 10:05 pm Icons are visual cues that help users use interfaces more efficiently. Instead of reading each word on an interface, users can scan for the icon that represents the task they’re trying to do. However, sometimes scanning icons can take longer than expected if the icons don’t have distinct outlines.

If you want to make your icons fast and easy to scan, use distinct outlines over uniform ones. Uniform outlines make the shape of your icons look the same. Distinct outlines shows the unique shape of each icon without any visual noise. This concept is similar to how all caps makes text harder to scan. Creating a Good User Experience: Information Architecture Basics. Learn from your customers for usable Web apps. Imagine the following scenario: You go shopping to buy a loaf of bread. The shops look gorgeous, decked out in vivid colors and stunning artwork. Trouble is, you can't always tell from the window displays what sort of products are on sale inside. Eventually, you find a shop that looks promising and ignore advice that this store's expertise is with a gadget you don't own.

You find the front door and wander in. Now you enter a maze of aisles containing products organized in an apparently random manner. Before paying, you attempt to ascertain that you can use your credit card safely, but the inscrutable small print has more to say about your legal obligations than reassurance about your security. This is a Nightmare on Web Street! Why does this happen? OK, it's a caricature. Online shoppers are less interested in a groovy multimedia experience than in finding, understanding, and buying products quickly and easily. The customer's perspective "This is too stupid for words. "" Back to top a. A. UI Design for Blogs and Online Magazines. Designing a website user interface can be a struggle match. If you’re building a small portfolio or simple blog layout there isn’t as much to worry about.

However an entire magazine requires featured stories and sidebar widgets and author profiles. There is a lot to consider! In this article I want to go over some examples of brilliant UI design focused around online magazines. Big Things Gain Attention This rule seems predominantly true for many of the popular magazine layouts. When your paragraphs are big enough to read at a good distance away from the monitor, then scrolling through and reading some text doesn’t feel strenuous. The most recent publication has a large featured image taking up most of the top screen. I’m also a fan of their fixed sidebar design.

Offer Related User Content Magazines tend to bring up the idea of articles and written content. You can now find online magazines with a lot more functionality. Simplicity at its Finest Developing a Footer Brazen Branding Hongkiat. Can We Please Move Past Apple's Silly, Faux-Real UIs? In recent years, the aesthetic of UIs has followed a dominant ideology that attempts to replicate the physical world. With a handful of software/product updates and new releases in the last few months, we’ve begun to see how it might be time to find a new balance (see Clive Thompson’s article in Wired and Sam Biddle’s on Gizmodo. As both Thompson’s and Biddle’s articles describe, the philosophy that drives the majority of contemporary UIs is called skeuomorphism. Derived from the Greek words Skeuos, meaning vessel or tool, and morph, meaning shape, a skeuomorph is, according to the Oxford Dictionary, a “derivative object that retains ornamental design cues to a structure that was necessary in the original.”

The term can apply to either a physical or digital creation. There is validity to a skeuomorphic approach. However, how Kindles replicate physical books is very subtle. Unfortunately, the iPad book app doesn’t achieve this level of sophistication. Really, iCal? [Image: J. Past issue - UI Design Newsletter. Taking this need to create personas that represent real people, with all their quirks and eccentricities and also their varied professions, to an extreme, is the technique of Design for Extreme Characters. Djajadiningrat, Gaver and Frens, in their paper Interaction Relabelling and Extreme Characters: Methods for Exploring Aesthetic Interaction present the case of creating a persona and resulting scenarios when designing a PDA. The scenario may be very detailed in terms of lifestyle. Jack likes wearing Hugo Boss suits and driving his BMW. However, from an emotional point of view Jack seems shallow and completely out of touch with the real world — apart from work, Jack is always keen to go to his next appointment, he is never tired, never bored.

He does not seem to have any bad character traits either; he is nice and serious. This is reflected in the roles the product supports. The three extreme characters that they describe are: a Drug Dealer, the Pope, and a Polyandrous Twenty-Year Old. Get To Know Your Users. It’s crucial for start-ups to know who uses their application and how. One of our goals with Intercom has been to surface this information, and have a single authoritative screen that tells you everything you’d like to know about a customer. Today, we launched that screen. You need to know your users Customer development, pro-active engagement, price testing, and surveys all work best when you have a good understanding of your customer. A single data-point or price-plan isn’t enough.

The key questions include: Who is this? You can group customer information loosely into four categories: profile data, business data, activity data, and communication data. Thinking In Silos When your customer information is scattered across different data stores, it encourages thinking in silos. The thing is all of this data is connected. Customer Data is Multiplicative Getting related data together pays off disproportionately well. But I already have that data? Sure you do. Simplicity Causes Butterfly effects. User Experience Is The Heart Of Any Company. How Do You Make It Top Priority?

The closer you are to your customers, the more relevant your product will be and the more likely you make it for people to choose you. It may seem obvious, but the gap between those that do and those that talk is widening, despite the immediate bottom-line benefits. But more than this, companies that put usefulness at the heart of what they do become part of their customers’ lives. Engaging with customers then becomes an ongoing conversation, rather than the stop-start involvement that characterized the 20th century. This makes it much easier for customers to come back, and keep coming back. Who are you for?

Usefulness is best achieved by thinking about everything as user experience. Financial services like Zopa or the recently launched Simple (first known as BankSimple) are taking customer needs into account by addressing the frustration associated with the traditional banking system. Designed to evolve with life Don’t always ask the audience 3 Case Studies Be More Like Apple. Cost effective Webcam eye tracking surveys | EyeTrackShop. The Anatomy of an Experience Map. Experience maps have become more prominent over the past few years, largely because companies are realizing the interconnectedness of the cross-channel experience. It’s becoming increasingly useful to gain insight in order to orchestrate service touchpoints over time and space.

But I still see a dearth of quality references. When someone asks me for examples, the only good one I can reference is nForm’s published nearly two years ago. However, I believe their importance exceeds their prevalence. I’m often asked what defines a good experience map. But it’s not just about the illustration of the journey (that would simply be a journey map). Rail Europe experience map. The experience map highlighted above was part of an overall initiative for Rail Europe, Inc., a US distributor that offers North American travelers a single place to book rail tickets and passes throughout Europe, instead of going to numerous websites. First Steps An overall inventory of touchpoints for Rail Europe. The Lens. Dollars And Sense: The Business Case For Investing In UI Design. In their rush to build more features into their electronic devices, companies often lose sight of a key ingredient: basic usability.

User-interface design (UI), the art of simplifying complexity into meaningful user experiences, is an increasingly important competitive advantage for technology companies launching new products, as people from consumers to business users seek solutions that offer as much intuitiveness as they do function. Today, usability is a must-have for optimal return on investment with new technologies. Companies focusing on user-experience (UX) and user-interface design in product and application development create better solutions, improving revenue, loyalty, and market share.

Numerous industry studies have stated that every dollar spent on UX brings in between $2 and $100 dollars in return. Usability matters The doomed first-generation Zune With options that are user-friendly on the market, frustrated consumers are not going to overlook technological kinks. A 7 Step Guide to Website Usability. What Does a UX Strategist Do? Tools to Make You a Stronger UX Pro. Gifts for User Experience Geeks 2011. The Key To A Consistent Brand Experience: A Consistent UI. 5 Ways That Your Crappy Co-Worker Is Like A Crappy UI. Nick Diakopoulos. Gifts for User Experience Geeks 2011. Why Johnny can't build a decent user interface. | The Thinker. 6 health IT usability myths and realities. How to Design a Better UX Resume. Veracity Solutions Blog » UX Methodology. UI Toolkit: 300 Resources for Only $8. Design Nav Bar for Web. UX. Best Free UI PSDs of 2011. 10 Heuristics for User Interface Design. Guiding Principles for UX Designers. Usability Is King For Your Product. Here’s How We Can Finally Measure It.

DOME. Designs for eradicating medical mistakes. Making the Switch To Agile. Why most UX is shite. Do complex user experiences really cause 50% of product returns? - Customer Experience LabsCustomer Experience Labs. Laws of interaction design « Interaction design. Foursquare Solves A Basic UI Problem That Eludes Google Maps And Yelp. Paper and computer workarounds challenge but may improve health IT. Making Clients Part of the Design Process. The Anatomy of an Experience Map. The dangerous decade -- Coiera et al. 19 (1): 2. Computer-based safety surveillance and patient-centered health records -- Ohno-Machado 19 (1): 1.

Sending the Questions to the Data. Product Development: 9 Steps for Creative Problem Solving [INFOGRAPHIC] Idolize Bill Gates, Not Steve Jobs - Maxwell Wessel. Usability consulting and training with Human Factors International--ensuring user satisfaction through user-centered design, user experience design, human factors, and software ergonomics. The UX of User Stories, Part 1 - Anders Ramsay.com. The UX of User Stories, Part 2 - Anders Ramsay.com. Tilt Gives You 3D Visualization of a Webpage. Www.ualberta.ca/~sruecker/links/07_Shiri_Thesaurus.pdf. UI Design Pattern Library. Interaction Design Association - Homepage. Impact of culture on user interface design. UXmatters :: Insights and inspiration for the user experience community.

Social Patterns. UI-Patterns.com. OK and Cancel Buttons: What's the Right Order?