This content is part of the Essential Guide: Essential guide to application modernisation

Collaborate, don't compete with UX and UI design

Designing a user experience and coding the interface are different disciplines that depend on each other for success. Collaboration and a new generation of tools are critical.

Contrary to popular myth, the overall aura of an application's user experience and the underlying engineering, which transforms that vision into a functioning user interface, are not opposing forces wrought by marketing and IT adversaries. Done right, it should be nearly impossible to discern where one ends and the other begins.

"If there is a distinction, it is that UX is an ambassador of the experience from the earliest stages of a project that starts with meeting the client and distilling the business goals," said Jason Scott, a UX designer at Y Media Labs in a Redwood City, Calif. The firm specializes in the design, development and marketing of mobile applications for clients that include PayPal, Staples and American Express.

Leah Buley, a principal analyst at Forrester Research who serves customer experience professionals, has a slightly different take on the same principle. "UX is a process experience that could include nondigital interactions, such as an in-store shopping trip," she said. "UI is what gets delivered through digital processes."

Those digital processes go beyond screen design and actions that ensue from a mouse click or finger tap, she said. "Applications are now including full 360-degree animations of products that are making static photographs obsolete. The developer needs to know how to build this so that a customer can interactively view a product from any angle, and have that occur in a fluid experience," she said.

UX is a process experience that could include nondigital interactions.
Leah Buleyprincipal analyst at Forrester Research

Rich animations are now popping up with increasing regularity, according to Burke Holland, director of developer relations at Progress Software Corp., based in Bedford, Mass. "My favorite was when Twitter replaced the star favorite button with a heart -- you touch it, and it bubbles and explodes. It seems so simple, but there was a lot of thought put into that."

UX and UI are not mutually exclusive. "You can't have one without the other," Holland said. "If the UI is a car, then the UX is the feeling you get when you drive."

As forward-thinking businesses adjust their business processes to focus on mobile users, the traditional border separating UX and UI developers has already largely disappeared, said Paul Trani, a senior creative cloud evangelist at Adobe Systems Inc., based in San Jose, Calif. "UX designers need to consider motion, transition from one screen to another by swiping, pinching to zoom and more," he said. "For UI developers to build it and have it function smoothly, they need to get involved early. This has to be a collaboration, not a serial process."

Collaboration between UX and UI

Prototyping makes a comeback

UX designers, who might count psychology and art design among their tools, need to interact with the developers who construct the UI, build the wireframe model and use prototyping to bring that vision to an operational state. Iterative usability testing allows for the two disciplines to work out navigation problems, or wording that users find confusing or ambiguous.

To fully understand user needs, it's necessary to obtain user feedback through usability testing, prototyping and getting feedback, Buley said. "Mobile computing takes you out of the screen-by-screen design paradigm. The best interfaces treat the user experience as a fluid continuum," she said.

Scott agreed, noting that at Y Media Labs, prototyping and user testing are important aspects of a successful design. "We do dailies. I design screens that immediately go to engineering. They don't have to be perfect, but we build, test with users, then iterate."

One of the biggest mistakes, according to Scott, is employing a rigid process that's focused more on tasks than deliverables. "The worst thing you can do is meet with a client, then moving right to the wireframe stage, without testing or prototyping. You get feedback from the client, but there's no user feedback."

UX and UI tools

As mobile computing continues to drive the need for intuitive interfaces and pleasurable user experiences, tools are becoming more plentiful and sophisticated. One key requirement that tools are now meeting is the need to build interfaces simultaneously for multiple screen sizes -- from tablets to smartwatches -- and multiple operating systems, including Android, iOS and Windows. 

A favorite tool of Scott's is the cloud-hosted InVision collaborative prototyping tool. "We can drop in photos, sketches or whiteboard drawings and share to get feedback," he said. "I'm a proponent of the more ideas, the better."

For digital design, Scott said he prefers the Mac-only Sketch, a vector-based design tool that is pushing aside traditional design tools, such as Adobe's Illustrator and Photoshop products. Through its support for plug-ins, Scott is using Zeplin for collaborating with developers who are building interface screens.

Perhaps recognizing that its traditional products are being upstaged by newcomers, Adobe is gearing up to launch Project Comet into beta sometime in 2016. The company is positioning the forthcoming platform as a new experience for designing and prototyping websites and mobile apps.

Progress Software's own extensible Telerik suite offers application development tools for the creation of UI frameworks and multi-platform screens.

Ultimately, succeeding with UX and UI development is a matter of involving developers with experienced designers early in the process. The antiquated approach of a designer working with stakeholders, then handing off a specifications document to developers is a sure path to universal dissatisfaction, Scott said. "It will not look like or behave the way it should, simply because it wasn't a collaborative approach."

Next Steps

Should UX testing and software testing be treated differently?

Is it possible to create an Agile UX team?

Don't make these mobile UX design mistakes

Drunk user testing changed HubSpot's UX research

Dig Deeper on Mobile infrastructure and applications