COULD YOU REALLY BE A UX DESIGNER?

So you think you are a user experience designer?

Are you sure? You might have it in your job title, but are you somebody who designs experiences for users? Or do you design user interfaces?

UX vs. UI

Some argue that you cannot design a user’s experience. After all there are so many things beyond your control that you cannot influence. But that is not my point. My point is that many people claim to design experiences, when they are actually designing a user interface. You see the user interface is just a tiny part of the experience, not the whole thing.

Take, for example, the rides at Disney. These rides are a crucial component of the Disney experience, but they are not the whole thing. Disney know this, which is why they craft every aspect of their customers’ experience, from the moment you buy tickets, to the member of staff who waves goodbye as you leave the park.

There is nothing wrong with being a user interface designer. But if you are keen to start designing the user experience, you will need to step outside of your comfort zone.

Adjust your attitude

The first step to becoming a user experience designer is a change in attitude.

As designers we tend to have a focused view on what our role is. But if we are going to call ourselves user experience designers we need to ditch the it’s not my area mentality.

A user experience designer has to be a maverick…willing to challenge traditional business

Take, for example, content. We are quick to complain if the client does not deliver the content or if the content is of poor quality. But we are slow to correct the situation. After all it is not our job. We are not paid to write copy.

Even so, if you call yourself a user experience designer you are responsible for any area that impacts the user experience. Even if somebody else also considers that area their responsibility.

A user experience designer has to be a maverick. Somebody willing to challenge traditional business silos and roles. You need to be somebody who doesn’t give up on a better user experience just because you meet a barrier.

Imagine you cannot take a particular design approach. Somebody feels it would break the company’s brand guidelines. What will you do?

A user interface designer may accept that constraint. After all, branding is outside their area of responsibility. A user experience designer would not. They would find out who owns the brand guidelines and work with them to find the right solution.

You see, user experience design is about collaborating with others to create the best user experience.

Collaboration lies at the heart of good user experience

There is no way you can create a great user experience alone. There are too many factors involved, too many disciplines required.

Being a user experience designer requires a collaborative relationship with a range of specialists. A user experience designer works with:

• user interface designers;


• content specialists;


• developers;


• business strategists;


• retailers;


• mobile experts;

and more, to create an outstanding experience.

You need to collaborate over areas such as content creation, site performance, SEO, and social media. Each will help to streamline the user’s experience. This is especially important in a multi-channel world.

We all know user interface design has become more complicated with the plethora of devices we now use. But for a user experience designer that is just the tip of the iceberg. Not only do you need to worry about users moving between devices, we also need to consider how users are moving between channels. A user may start on Facebook, move to a website and end up on YouTube.

In larger organisations things get even more complex as users get passed between departments. Often different business silos manage different parts of the website or different mailing lists. This can lead to a jarring experience for users.

For example, I once worked with a charity whose most dedicated donors received over eight emails a week from the them. They were spamming their best donors, all because nobody was tracking what went out.

But the user experience is not just about devices and channels. We must also realize that the users’ experience extends beyond their screens.

Following UX beyond the screen

If we wish to call ourselves user experience designers, we need to consider the context of the users’ digital experience. Digital interactions do not happen in isolation. They are a part of a broader customer experience. You can have the best website in the world; but if the rest of the customer experience is poor, you have achieved nothing.

The success of Zappos.com was not down to their user interface

The success of Zappos.com was not down to their user interface. It was down to the amazing experience created by their return and shipping policy.

I once worked on an e-commerce site that delivered frozen ready meals to the elderly. This was not an audience who were particularly comfortable with the idea of e-commerce. We needed to do everything possible to make it a painless experience. Many of the things we did focused on simplifying the online purchasing experience. That, and reassuring the user about things like security or privacy. But one key component of the experience lay beyond the user interface. Many of our elderly customers were nervous about a stranger delivering goods to their door. This was especially true when one of the services offered was unpacking the delivery in the customer’s home. As a user interface designer it would be tempting to add a reassuring message onto the website and conclude that was all you could do. Instead, together with the client, we decided to police check all the delivery people as a way of reassuring customers.

It is always important to remember that the digital tools we build are just one small part of the customer experience. Other areas such as customer service, fulfillment, governance and strategy are also crucial to the experience.

How far are you willing to go?

Have you had enough of building websites or mobile apps that fail? Fail because of shortcomings in other areas of the user experience? If so then it is time to push the boundaries of your role.

It is time to start questioning and collaborating with everybody to build a better experience. Do not presume you have all the answers. But be willing to challenge the status quo. Ask difficult questions. Do whatever it takes, if it has the potential to improve the user’s experience.

COULD YOU REALLY BE A UX DESIGNER?

4 SIMPLE WAYS TO DESIGN KILLER CALL TO ACTION BUTTONS

Call to action buttons that are easy to see and understand will make a huge difference to your client’s conversion rates. When designing these buttons, it’s imperative to consider a wide range of factors. Some of them include the color, contrast, button copy and even whether or not to include some directional cues right beside the button.

In short, for an element that takes up a small spot on your webpage, you’ll have to invest a disproportionate amount of time thinking about how to best present it to your users. Yeah, call to action buttons are that important. They are, after all, the stars of a page, whether they’re meant to get site visitors to buy something, sign up for something or just click through.

They represent the goal of your page. Every page should have a goal. Take a landing page, for instance, the goal is to get leads to click through to the main product or service page. An intelligently designed button that takes into consideration how your visitors want to buy or sign up for something is what every designer ought to be striving for.

 

1) Directional cues

As human beings, we’re just hardwired to respond to eye direction as a powerful way of cuing us. Think of it: When you see someone looking at something not in your field of vision, you’re automatically curious about just what he’s looking at. This same principle of directional cuing can be applied seamlessly to the website you build for your clients.

Yes, directional cues can be the more obvious arrows and even fingers pointing at call to action buttons, but for something truly unique and relatable to your site visitors, go with a picture of a person looking at your call to action buttons instead. You can’t go wrong.

For a clever example of this, we turn to Salesforce’shomepage. Salesforce is the worldwide, cloud computing company from San Francisco. In particular, we want you to glance at the one mega image on the homepage: It seems like a woman looking at her smartphone, about to perform a mobile transaction.

While this is certainly a plausible interpretation, the image also doubles as a stealthy-yet-powerful directional clue. When site visitors see the woman looking at the phone in her hand, their eyes will naturally follow her gaze to the right of the homepage. As they do, their eyes will inevitably land on the three call to action buttons next to her face and hand.

Thanks to where her gaze is pointing, leads will be likelier to notice the call to action buttons. At the end of the day, that brings more conversions and a greater number of sales to the website.

 

2) Really simple button design

When you make your buttons as simple as possible, you eliminate chances that your site visitors, buyers, and readers will get confused. When they get confused, they usually won’t follow through on the action that your button copy wants them to. So keeping the client’s button design minimal is what all web designers should aim for.

Let’s look at Twining’ssite to see how a brand can do this right.

On the homepage above the fold, we see a range of simple buttons in brand colors, that clearly communicate exactly what you’ll achieve by clicking on them. The buttons also look like buttons, thanks to their rounded-rectangular design, and the color contrast of black on gold makes them as minimal as possible.

In short, it’s going to be nearly impossible for Twining’s shoppers to misunderstand that the buttons are call to action buttons.

 

3) Well-defined microcopy

Microcopy is the star of the call to action because it uses action-oriented verbs to inspire people to move. The amount of real estate that web designers have to plan intelligent labels is very limited, so microcopy has to be short and to the point. Microcopy that lets site visitors know exactly what they’re clicking on is a winner because it doesn’t waste their time.

Sometimes, microcopy can be neglected, which is unfortunate. In spite of all the attention given to the button design, colors and affordances, the copy shouldn’t have to suffer. Sites whose microcopy suffers are sites whose conversion rates suffer, too.

You know you have successful microcopy when you have different call to action buttons next to each other, yet site visitors can instantly tell what the purpose of each button is.

A helpful illustration of this can be found on the J.Crewproductpage for its spread-collar shirt. There are two buttons competing for the buyers’ attention: the “Add To Bag” and “Add To Wishlist” buttons.

Because both are very clearly labeled, though, buyers aren’t confused and can achieve their goals with more certainty than ever. Well-defined button copy that leaves no doubt as to what a user’s action will achieve is always a winner.

 

4) Color contrast

Shoppers are an unreliable bunch, which is why the user experience has to be tailored to them. In other words, buying something from your client’s e-commerce store should be the easiest and clearest thing in the world. Something as basic as color contrast can vastly improve the shopping experience for site visitors.

Color contrast that works can draw your shoppers’ eyes to the call to action button and make it stand out from an otherwise noisy background. When shoppers can easily find what they need to click on to make a purchase, obviously a site’s conversion rates are going to shoot up drastically.

On theTargetproductpage for a Sony DVD player, the call to action buttons — “add to cart” and “find in a store” — use color contrast to great effect. Not only is the color contrast easy to spot—white on red and white on blue, respectively—but it succeeds in drawing the buyer’s eye to the button. The fact that the background is full of white space only helps make this contrast stand out even more effectively.

 

The bottom line

Call to action buttons are vital to how much money your client’s site will make. All web designers have to realize that their design’s goal should always be to support more conversions. For e-commerce sites, that will be sales. For news sites, that will be sign-ups to things like newsletters and the like. The point is that conversions matter most, and call to action buttons have to support this goal all the time.

That’s why a great deal of thought has to be invested in designing a call to action button. Even though it occupies a really small space on a webpage, its importance is immeasurable. Anything from the colors to the button copy to any directional cues nearby will make or break its effectiveness.

To deliver for their clients, designers must look beyond just the appearance and layout of their buttons all the way to the practical side of things. Will this button increase the likelihood that leads will click through and become actual conversions? Designers who think like that do a great service to their clients, and they should be commended. Designers who don’t think this far need to improve their priorities and come through for their clients every time they’re working on a project.

4 SIMPLE WAYS TO DESIGN KILLER CALL TO ACTION BUTTONS

FACEBOOKS’ REACT NATIVE RADICALLY SIMPLIFIES APP DEVELOPMENT

Facebook fans and app-development enthusiasts can at last rejoice: the company’s much-hyped, and recently announced, framework project was unveiled yesterday at Facebook’s F8 Developer Conference. ReactNative is a radical departure from how mobile, UI app development is usually done.

When this open source project was first announced, it received excited reactions from developers. React Native is a new approach because it allows developers to write code and then glance at the results in just a few seconds. Naturally, this is more appealing to some than having to first recompile the whole app, as has been the case traditionally, to see development results.

In spite of its hype as a radical change in app development, React Native does share some similarities with conventional, best practices. For instance, it’s still based on JavaScript, just like other hybrid techniques.

However, where this app-building framework is markedly different is its removal of a cross-platform wrapper. This is usually where developers access native functions on various devices. Instead, React Native encourages developers to use JSX, which is a Facebook JavaScript variant, to “hook” to native widgets. Then, developers can access the apps natively and observe the same behavior, look, performance and feel as “true” native apps.

However if you think that React Native is a full-fledged framework for this type of app development, think again. Facebook likes to throw us a curveball: the company likes to refer to this framework as a tool that developers can rely on to actually see apps built with the Model View Controller architecture. It’s no surprise, then, that Facebook is already hard at work creating companion tools likeRelayandGraphQL.

 

A new design philosophy

The point of React Native is that Facebook wants designers to think about app creation in a whole, new way. React Native does this by introducing a framework that’s really based on the idea of “learn once” and “write anywhere.” In other words, React Native can empower app developers to become acquainted with it and then take that knowledge to easily and efficiently develop apps on different platforms.

In theory, app developers can create an app for iOS and then use what they’ve learned in that process to nimbly develop and build an Android app. Instead of building an app and then adapting it to various operating systems, React Native allows them to take their knowledge of the framework and build apps on different platforms from scratch. Facebook believes that this approach will make the entire app-development process simpler and more effective. After all, when developers can learn React Native once, they will all be on the same page when they move from one operating system to the next.

Before Android developers start getting too excited, there’s a caveat to this news, unfortunately: Right now, Android support isn’t yet available. React Native can only be used with iOS, but Facebook is working on Android support as I write; stay tuned…

 

The origins of React Native

If you’re wondering about the history of this framework, it goes back toFacebook’sReacttechnology, which is a JavaScript library intended for user-interface creation. What’s quite remarkable about React is that it’s been around for just under two years though it’s already become quite popular in that short time. What sets apart this technology is how it accommodates logic and presentation at the same time, which is another bold move on Facebook’s part.

React technology is founded on code units that behave like classes. These components then absorb data and create HTML based upon said data. Further still, single components even offer developers specific functionality, which allows them to be used together for different projects. This has the overall effect of promoting reuse as well as streamlining the thinking behind programming logic.

 

What Facebook’s saying

It’s both helpful and instructive to read what the Facebook people are saying about their project launch. React Native project leader, Tom Occhino, wrote that the framework grants designers unprecedented freedom. Highlighting the fact that its components are uninterrupted functions that reflect what developers are looking at, Occhino stressed how developers can skip the usual step of reading from the basic, rendered-view implementation before writing to it.

On the React Native website, Facebook also pointed out that designers are empowered to utilize fundamental platform components like UI Navigation Controller for iOS and UI Tab Bar. As a result, this creates apps that feature a uniform look and feel that’s consistent with the entire platform. It also raises the bar in terms of quality. Designers can be glad that components are effortlessly included into an app through their React Native counterpart components, those being Navigator IOS and Tab Bar IOS.

Initial reaction to Facebook’s new framework has been generally positive, and it’s helped that thepositivereaction came from people like Mozilla developer James Long. Of course, now that React Native is widely available, only time will tell how it’s really received. At this point, reaction has been pretty much divided into two camps: those who welcome this news with arms wide open and those who are skeptical and even critical of this ambitious change in app development from Facebook.

The big takeaway from this is how Facebook’s React Native is looking to significantly change the JavaScript-development industry, for better or worse. When you take this news with theNativeScriptproject from Telerik, it certainly seems that JavaScript developers are in for some eventful times.

To hear Facebook put it—and, yes, we’re mindful of the fact that they have to toot their own horn when announcing their new project’s wide release—they’re very enthusiastic about what this means for the design industry. Occhino doubled down on the hype, telling the world how “excited” the company’s been to make React Native available for all on GitHub and release it as an open-source tool for iOS.

He went on to reassure the world that Android support is coming soon—how soon is anyone’s guess, though—and that Facebook plans to keep at it with the React for the Web initiative. The company’s plan seems to have been to release iOS support as early as possible to collect as much feedback as possible from early users of this framework, and then take that information and put it to good use for Android support down the line.

 

What the future holds

As with all new design releases, early adoptors are always reminded that what they’re getting their hands on is far from perfect. So when you’re experimenting with React Native, don’t be surprised if something’s either not yet implemented the way you think it should be or if something’s downright working improperly. In either situation, Facebook has you covered because it’s inviting all early users to give as much feedback as possible from the get go.

FACEBOOKS’ REACT NATIVE RADICALLY SIMPLIFIES APP DEVELOPMENT

50+ INCREDIBLE FREEBIES FOR WEB DESIGNERS, MARCH 2015

The Web is packed with some of the most amazing, inspiring, and downright cool projects that you’ll ever see. And thanks to the fantastic web design community, many of them are completely free.

Today we’re continuing our monthly roundup of the best resources for web designers. We’ve got fresh fonts, plugins, templates, tools, and all sorts of goodies for your delight. Enjoy!

 

50+ CSS Button Designs

A large collection of buttons created with CSS for you to integrate into your development, making use of the provided source code.

 

Wood Vector Pattern

A customizable pattern to give your design elements a bit more realism and detail.

 

Samsung Galaxy Note Mockups

A nice trio of Galaxy Note mockups you can use in presentations or for design purposes. You can edit them in Photoshop and make use of the smart layers to simplify the process.

 

Moto 360 Watch Sketch Resource

A well-layered set with the Moto 360 Watch as the main protagonist. Download and modify anything you want with Sketch.

 

Flat Vector Devices Pack

An awesome collection of devices to use for mockups and development. The flexibility offered with PSD, AI and SVG formats is a considerable plus.

 

Freebie: Kitchen Icon Set

An awesome pack of 40 simple icons related to food and cooking, coming in PSD, PNG, EPS and AI formats for easy editing.

 

Lynny Vector Icons

A huge set of vector icons divided into eight categories, useful for any type of design work.

 

Flat Medical Icon Set

A quirky package containing medicine-related icons. Perfect for fitness apps or projects involving health.

 

Street Poster Template

A cool template to design promotional work for your next event, business or project. The inclusion of InDesign, Illustrator and Photoshop files lets you choose the best tool to edit.

 

Low Poly Backgrounds Bundle

A colorful series of big images with a geometric style. You will find abstract shapes of animals, famous places, landscapes and more.

 

Dark Flat UI Kit

A simple user interface design based on components for various purposes. Editable in Photoshop.

 

Uzers UI Kit

Uzers is a new project that aims to bring you top-quality designs for web and mobile. This free UI Kit is a perfect introduction to what they want to achieve.

 

EventRay UI Design

Help yourself in the creation of the next good-looking Web or mobile design with this complete UI kit.

 

Againts Typeface

A very interesting font that allows you to create a beautiful mess for your headlines, using alternate glyphs and extra ligatures for customization.

 

Perfograma: A Free Font with a Story

A quirky font inspired by the Mark I, one of the first computing machines ever, which read information from pieces of punched paper, hence the dots.

 

Serendipity Script Font

A nice cursive typeface with a strong handwritten look. It includes a wide set of special characters in order to adapt fit multiple languages.

 

Kontanter Font

A very interesting monospaced, experimental font with support for quite a few European languages.

 

Quad: Geometric Font Family

A bold new typeface with three awesome styles going from solid black to an outline style. Perfect to give big-sized text an eye-catching look.

 

Expire PSD Theme

A PSD theme including four pages for home, blog, typography and posts, all making use of a clean and professional layout.

 

iPress: Magazine and Blog Template

A cool design in PSD format for a content-packed website. Best for magazines, news sites or blogs that are always adding new material.

 

Hosting Web Template Designs

Are you planning on setting up a new hosting company, or want to give your website a visual overhaul? This would be a great place to start looking.

 

Flat Magazine Template

A flat-styled template, perfect for magazines and news websites. Provided for free in PSD format.

 

Capoverso Theme

A content-focused theme that goes for a minimal layout and strong typography in order to achieve a clutter-free look.

 

Solofolio: The Ultimate WordPress Portfolio Theme

Built with images and portfolio pages in mind, SoloFolio provides a fantastic platform to elegantly show your content.

 

Ex Machina HTML5 Template

A responsive HTML5 template with very clean looks and a screen wide header that gives the site a fancy little touch.

 

Portfolio HTML Template

As its name implies, this template works best as a platform for you to show what you can do and promote it online. It features a simple, elegant layout and makes great use of images.

 

Hover Effects

A collection of various hover effects and animations applied to a set of colorful buttons with nothing but CSS.

 

Mosaigrid

This superb experiment re-organizes all images in a grid in order to make the most out of the space available.

 

AngularJS Animations

A neat experiment that makes use of the new gsTimelines library to implement complex animations into a project.

 

Folded Corners with Pure CSS

A trio of elements with a folded corner effect. Created with pure CSS by Lea Verou.

 

Hardening Framework

A potentially vital tool for the safety of your project, the hardening framework was created by the team at Deutsche Telekom in order to provide easy auto hardening for your server. Make sure you visit the GitHub page to download.

 

Mootor Framework

Make mobile app development a bit more familiar with this cool HTML5 framework, aimed at smaller screens.

 

Isso Comments

This commenting server works in a way similar to Disqus, powering conversations at the bottom of your publication.

 

Codecast: Real-time HTML and CSS

A supremely useful tool for people both learning and teaching these two languages, allowing them to communicate and code at the same time via screencasts.

 

Gridpak: The Responsive Grid Generator

Enter your own desired parameters in order to create quick grids to implement within your next project.

 

CSS Ruler: Explore CSS Lengths

Learn a bit about CSS and explore its possibilities by experimenting with lengths in this interactive showcase.

 

A Series of Free Online Tools For Developers

An amazing collection with dozens of tools for developers including code viewers, converters and other utilities to simplify your work.

 

Fabric: Mobile Development Platform

Fabric is a set of tools developed by mobile developers, for mobile developers. It aims to solve all the common problems that get in the way when trying to build world-class applications.

 

Frontend Stuff

A neat collection of tools for use in Web projects. It consists of mostly JavaScript material and it’s constantly updated, so be sure to check back often.

 

Essential React

If you’re looking for a basics-only pack for creating React apps, Essential could be a great alternative.

 

jQuery Scalem Plugin

A jQuery plugin that will enable you to make any element in the website responsive, adapting to all screen sizes.

 

Intercooler.js

This plugin simplifies the use of AJAX, turning the language into something much more familiar to HTML users.

 

JQuery EasySelect

A useful jQuery plugin that allows users to make multiple selections in a faster and easier way.

 

jQuery Textcomplete

An interesting tool that will allow you to add autocompleting options to your textareas.

 

Nunchuck.js

This library enables developers to integrate mobile browser controls into desktop browser-based JavaScript games through an extremely lightweight tool.

 

Rimg: A Responsive Image Solution

Use pure JavaScript in browsers that support mediaqueries in order to make the images in the site responsive.

 

Ratchet

Ratchet simplifies app development for Web professionals, allowing them to create mobile apps with familiar HTML, JS and CSS components.

 

Nines: Web Performance Tool

Track down any problem related to the performance of your Web project with this neat tool.

 

Favico.js

An impressive tool to give your Favicon alternative uses such as animations, colors or even project video from your webcam!

 

jQuery Load Scroll

This jQuery extension will make images on the site load only after scrolling to them. Use it to improve initial loading times in image-heavy projects.

 

 

Experiment: Playing with Particles and Transparencies

A beautiful experiment by Luigi Mannoni where he creates this amazing orb that responds to your actions with the mouse, constantly animating as a result..

50+ INCREDIBLE FREEBIES FOR WEB DESIGNERS, MARCH 2015