Modern application development is all about user experience. While the need for creating great user experiences is obvious to developers building consumer apps, with more permissive Bring Your Own Device policies, even developers building line-of-business applications have to think beyond utility. Generally speaking, the shift to more experiential designs means that developers are becoming more aware of design.

“It’s no longer enough to be a great developer,” said Dave Mendlen, CMO at DevExpress. “Now you have to be able to build experiences.”

User experience distinguishes one application from another, even in business settings. “One of the things we always hear is ‘My social media, my online banking app, my video game,’ ” said Jason Beres, VP of product management at Infragistics. “When the stuff people are using on their off-hours delivers such a great experience, they start to wonder when the at-work experience is not great.”

Christian Schormann, director of product management in the Expression Group at Microsoft, thinks most developers realize that today’s software requires more than just pixels on a screen.

“Just because more people are aware of design doesn’t mean that everybody is good at it or is passionate about it, but there is a general awareness about the importance of design,” he said. “The number of developers who are passionate about user experience has grown a lot over the last five years.”

Going beyond the UI
Creating user experiences is more complicated than creating user interfaces (UIs). For one thing, user experiences must consider aesthetics, software behavior, and user interaction. For decades, UI efforts focused primarily on utility, but with the growing popularity of games and mobile devices, the goal is now to delight end users.

“Because software has become part of people’s everyday lives, you have to account for how people feel about your software as well as whether they’re technically capable of using it,” said Todd Anglin, VP of HTML5 Web and mobile at Telerik. “While your software needs to be functional and do what it’s supposed to do, usability takes it to that next level where users enjoy using the application, come back for more, and continue to invest in your success.”

User experience also impacts the economic success of applications. “The impression your application makes, how it wears, [and] how easy it is to use has a big bearing on the ratings you get, your application’s reputation, and economics,” said Eric Zocher, general manager of Expression Studio at Microsoft. “If an app has a functional but pedestrian user experience, it’s very easy for a polished competitor to climb up the charts. And, as an app goes higher in the charts, it sells more.”

Schormann agreed, adding that some applications are becoming more like media. “Software is basically moving away from utilitarian workflow and task-centric things into something that is more similar to media,” he said. “Touch device applications are much more like dynamic media: information visualization, information dissemination, entertainment, a stream of news. That does not mean utilitarian applications are not required anymore; they are just not as central in life and probably not the ones people are spending the most time with.”

In some organizations, designers, developers and user experience experts collectively build user experiences. David May, lead graphic designer at GrapeCity, said his perfect ratio would be one designer, one developer, and half of a user experience designer. Most organizations lack such luxuries, however.

“The applications and sites that seem to succeed have a tight tie between designers and developers,” he said. “We know most of our customers do not have access to designers. That’s why we allow developers to easily apply and customize styles without deep knowledge of XAML design or CSS.”
#!
Developer involvement in design
Developer involvement in design can vary depending on a number of variables that may include project size, budget and culture. While design and development are distinct areas of expertise, in some shops the designer and the developer are one.

“What’s happening a lot is what I call Swivel Chair Workflow,” said DevExpress’ Mendlen. “Most developers have two or three monitors on their desk. One screen has Visual Studio and one screen has Blend. The flow between the two is happening in their minds as they compose the code on the left and the UI on the right, then they wire those things up as appropriate. The great thing is these tools work so seamlessly together, you can flow your code into Blend and mess with it and then flow the UI into Visual Studio and run it.”

It may be that the developer is focusing on all aspects of the code (UI, business logic and data layer), or the developer may have a specialized role. If a developer specializes in UI development by default, he or she has to care about the creation of user experience. The more downstream roles—business logic and data—also may be affected by the design, however.

“Design should matter to all developers,” said GrapeCity’s May. “The UI guy needs to understand the data and elements being shown—what’s truly important, and why the user needs access to it. The non-UI developers also need to realize what and why each piece is important so they can make the proper decisions on the correct data to serve. Building quality applications is a team effort. Each developer needs to focus on [his or her] duties with the end design in mind.”

How data is collected and validated, and how the format is collected and stored, can have an impact across the application. “Does it come from the database, the database developer, or some other level of the application?” said Telerik’s Anglin. “Understanding where in the grand scheme of things my logic layer will exist and manifest is an important thing. The data and business logic programmers need to be involved in the conversation that includes the UI guys on the front end, because all of these things are connected to deliver the final product.”

The point is to surface the right data at the right time, which may require some work on the front end, the back end or both. An example is Model View ViewModel (MVVM) development, in which models are created in code. The models do not align with the database structure, so either the code has to be modified to ensure that the data appearing in the UI is right, or the database administrator or developer has to create views or procedures that serve up data in a manner that it can be used.

“If you have people working at different layers and there’s no interaction between them, it can be challenging,” said Infragistics’ Beres. “You could be rocking and rolling on the front end, but the data is not available. If that happens, you have to go back and not only do some database work, but write some more code and then bind it to the UI.”

Although some developers have become passionate about design to the point of seeking out design-related education, most are choosing to focus on their core competency. “I don’t get any sense that developers are suddenly becoming skilled usability experts and skilled designers,” said Anglin. “They may be given tools that allow them to do things designers can do, but a developer’s way of thinking and a designer’s way of thinking are appropriately different. If we were all left-brain thinkers, we’d have lousy designs. If we were all designers, we’d have non-functional software.”

While developers generally may be more aware of design than before given today’s focus on user experience, most realize they lack the expertise necessary to become a “true” designer.

“In the high end, where there’s an agency involved, the level of developer engagement in the UI is relatively low. The agency hands off the assets and the developer implements them,” said DevExpress’ Mendlen. “Design is a distinct discipline, something people go to school for their entire lives, so you don’t want to trivialize it. You can’t just buy a book and be a designer, but what you can do is take advantage of design concepts and prebuilt user experiences. Even though you may not aspire to be a world-class designer, you do want your application to have the right level of visual design.”

In addition to thinking about the aesthetic design and the function of the software, user interaction also must be considered. In the case of controls, someone has to decide which types of controls are best suited to particular actions and gestures, for example.

“Twenty years ago, you had one graphic designer. Now you have front-end developers, back-end developers, interaction designers, visual designers, and analysts,” said Tobias Komischke, director of user experience at Infragistics. “The overall goal is they work together in a very user-centered process to deliver something that is better than the individual parts could ever be.”

Infragistics has a user experience team responsible for design and a UI team of developers who implement designs. Komischke said the user experience team makes a point of involving the UI team early on because the early front-end discussions may influence the choice of technology used.

“We bring developers in as early as we can,” he said. “If we think we need a rich activity somewhere on the screen, it may make the difference between using a XAML-based platform rather than a non-XAML-based platform.”
#!
Converging vocabularies but different disciplines
Developers know better than to try discussing the nuances of C++ development with a typical graphic designer. Conversely, graphic designers tend to avoid leading and kerning discussions with developers. Thanks to the Web and the mobile device explosion, some visual and interactive designers have become very knowledgeable about HTML5 and CSS3, while more developers have become knowledgeable about concepts such as theming. As a result, there is more vocabulary overlap between the two camps, which can result in better mutual understanding and better workflow efficiency.

“There is more shared vocabulary between developers and designers now,” said Tim Aidlin, creative director at DevExpress. “Designers are learning HTML5, CSS3 and caching because the goal is to improve the user experience.”

In addition to learning some common vocabulary terms, more discussions between designers and developers are happening earlier in the application life cycle since the appearance of an application and its behavior cooperatively shape the user experience. And the behavior of the application may affect the choice of technology.

GrapeCity does a lot of MVVM development for HTML5 and Silverlight. Bernardo Castilho, CTO of ComponentOne (which was acquired by GrapeCity), said that because the view model is directly correlated with the view, developers and designers have to agree up front how an application is going to look and how it is going to operate.

“Designers are working much more closely with developers now because the developers are writing the view models, which disclose the object model for the consumption of the view,” said Castilho. “If I’m writing the view model, I need to know what the view needs, so I have to work with a designer. If the designer and the developer are the same person, the developer has to think about design at an elevated level.”

One of the principal developers at Infragistics has a degree in usability and user experience. While he understands both design and development, he is nevertheless a developer at the end of the day. “If you talk to this guy, it’s immediately obvious that he thinks holistically,” said Infragistics’ Komischke. “Yet, his time is not split 50/50 between design and development. You have to focus on the part you really want to excel in.”

While some developers are learning the language of basic design concepts through osmosis, it is nevertheless helpful to have a common vocabulary as long as the definitions are consistent and mutually understood by developers and designers. “When you have two people talking about the same thing in different ways, you have chaos pre-programmed,” said Microsoft’s Schormann. “More developers care about design, so they are learning the language, and more designers understand that to build great interactive designs, you have to understand a bit of the technology.”

Getting smart about design
Not all developers have the same interest in design, nor are all equally required to be involved in design. Those wishing to learn more can seek out resources such as books, blogs, conferences, samples, components, frameworks, videos, and outside consulting services.

“There is head knowledge and actual design knowledge,” said Telerik’s Anglin. “Understanding the vocabulary and key concepts is easier than learning to be a great designer in practice. You can’t just pick up a textbook or read a blog. Learning means expanding your horizons, looking at what you’re not doing day to day, and getting involved in communities that are outside your comfort zone.”

Acquired knowledge has to be applied to be valuable. Anglin recommended seeking out projects that challenge current abilities. “If you want to embrace design, you have to become that and not just give it lip service,” he said. “You can’t just fire up Photoshop, add shading, and call it software. If you want to develop design competence, you have to become much more saturated in the design experience.”

Telerik is now providing guidance in the form of videos, blogs, articles, tutorials, reference applications and white papers. One of the more popular topics is how to migrate a Windows Phone app to a Windows 8 Metro app. Telerik also offers UI controls and the Kendo UI, which is an HTML5, jQuery-based framework for building modern apps. Using such solutions enables developers to do things such as build and customize themes without having to know the styling language, which is faster, cheaper, and less frustrating than starting from scratch.

GrapeCity also offers UI controls and tools, including ClearStyle for Silverlight and HTML5 for Steamroller that simplify styling. The company is currently working on samples and white papers focused on MVVM. “We’re trying to make it easier to do some designer-like things in easier ways,” said Castilho.

DevExpress and Infragistics are also putting the power of design, interaction and prebuilt code in the hands of developers. DevExpress’ recently announced DXperience 12.1 helps developers deliver next-generation user experiences on the desktop, on the Web, and across devices. The company also offers free webinars and blogs, some of which address design.

Infragistics’ NetAdvantage Ultimate is a complete cross-platform, cross-device development tool set that enables great user experiences across mobile devices, on the desktop, and on the Web. In addition to providing webinars, podcasts and videos, the company now offers design tutorials and design-related consulting services.

Bottom line, there is no shortage of tools or resources. The question is the degree to which individual developers wish and are required to get involved with design. While design and development remain separate areas of expertise, there are nevertheless bridges emerging in the form of tools, technology, services and people that make it possible to create great user experiences more efficiently.