DISCOVER

Every movement begins with a moment.

Why Your User Interface Developer Should Have Design Input

Posted 13 August 2015 9:00 AM by Sharline Bramucci @MoxieUSA

Before launching full force into my blog, I’ll start by introducing you to three key people who play a critical role in developing truly engaging, intuitive and effective digital experiences.

• The User Experience (UX) Designer – The UX Designer works on the functional layout of the User Interface (UI). His or her process is more analytical and focuses on delivering an experience that aligns with natural/typical human habit and behavioral intuition. The UX Designer’s role can be far more complex than that, mind you, but essentially he or she ensures that the experience a user has on the website is fluid, consistent and intuitive.

• The Web Designer – The Web Designer, also referred to as a UI Designer, is the person who adds aesthetics on top of the UX design, usually in the form of wireframes. This person creates the look and feel of the website — color palette, photography, graphics, font types and so on. 

• The User Interface (UI) Developer – A UI Developer (aka the subject of this blog’s headline) is the person who brings the static design to life. He or she connects the machine to the design and the design to the end user. 

Been There, Done That

I started in Web development when Geocities was a popular place to publish your website and scrolling text banners was a “cool” animation.

I Love the InterWebs!

In the early years, UI Developers were few and far between because most software companies considered the position to be a luxury rather than a necessity. In their minds, Software Engineers were perfectly “capable” of building a user interface with out-of-the-box components, which were functional for the purposes of the product.

Meanwhile, in the world of advertising, most of the market was saturated with Flash developers. It made perfect sense: HTML-based functionality was limited in sizzle. And as the program’s name indicates, Flash enabled developers to achieve a much more “flashy” experience for their users.

But when the iPhone made its mark on history, Flash quickly fizzled out. And that’s when the industry shifted. The next generation of UI Development emerged under the name of “HTML5 Technology.”

The Dawn of a New Age

In Moxie’s nascent days, UI developers had little insight into the project until the development project kickoff meeting. But soon Moxie’s Technology leadership team made a push to include Lead Developers early on in the process. The theory was that it would help the team seamlessly connect the dots from initial concept to the final experience. They were right. Not only did we adapt quickly, but the benefits of the new process became apparent almost immediately — especially in terms of efficiency, communication and collaboration. So what are some of key contributions that come with having a developer involved from the start?

1. The Possibilities

Web technology has come a long way in just the past few years. Look back only half a decade and you can see the leaps and bounds the Web has made while viewing newly published websites. This may not be as apparent to end users as it is to developers, who have hands-on experience working with an ever-expanding arsenal of evolved tools. The technology and architecture just keep getting better and better (and better).

For example, the libraries and frameworks now available have freed up ample time for UI developers to add the subtle design enhancements we get excited about building. We construct these interfaces day in and day out — tinker, delete, rebuild. We’re constantly looking at other developers’ code for new projects to dive into and, in the process, come across some beautiful user interactions. We work in pixels, but we also work in elements and components. So when three horizontal lines signify a menu and an X signifies a close, why not animate the hamburger menu into an X and back again to a hamburger? UI Developers make these design decisions all the time while building out a website and are constantly assessing the smaller design and interaction nuances.

2. Optimization

UI Developers work with everyone on the project — marketing, analytics, design, project management, you name it. Once the project hits development mode, we get all kinds of information from the various folks involved. Bringing a UI Developer into the first rounds of brainstorming is like having a gut-check expert in the room. Of course everything should be vetted through its respective expert, but until that time comes you can rely on your UI Developer to give accurate feedback.

UI Developers also see the whole picture. With data speeds getting faster, we’ve had the luxury of adding more images, larger graphics and — waaaaaaaait for it — videos for backgrounds! It’s all very exciting and lovely, but there are two very important things to consider in order to ensure that your beautiful design can, and will, reach the intended audience:

• Ease of data consumption — Not everyone has high-speed Internet. I know it’s hard to believe but, alas, it’s true. There’s a whole subset of users out there who can’t download 37 images on your beautiful new homepage in the 5 milliseconds you have to create a lasting engagement.

• Speed of page load – Yes, it still matters and, no, not just because Google says so. Data isn’t free, after all. And not everyone has the deep pockets it takes — and would love to have — to consume large amounts of it between billing periods. In fact, one ISP has started charging users for data consumption after a certain limit has been reached. So now even our broadband has data restrictions unless you want to hand over your dolla dolla bills, y’all.

Finally, if you have a client who needs a rebranding or a redesign to give its users a fresh look and access to updated content, sometimes it’s better to trade in the big ideas for a more agile UX. Step back and consider how much the end user will appreciate (or resent) your site if it site swallows up 40MB of their data plan. Or think about how frustrated a consumer might be when trying to quickly find information while your site’s content loads at a nice, leisurely pace. A developer will automatically calculate these potential UX pitfalls when too much sizzle has been added and provide proper feedback.

3. Architecture

This is where your UI Developer might start to really rein in the creatives’ desires, yet he or she will also have excellent suggestions on alternatives. Of course we should push the boundaries of what has been done. But even something that’s seemingly small to a designer can lead to unnecessary technical complications.

As previously stated, UI Developers have hundreds of thousands of repositories of code out there — places where we collaborate, discuss and collective elevate the beauty we can build into our websites. This collaboration also means it has been tested, peer reviewed, tested again, tweaked and, for the most part, ready for use. Designing a website that is overly cutting edge is a poor use of client time — and by “time” I mean money (Yes, I said it).

The truth is, this approach can bloat the timeline significantly, lead to infrastructure issues and result in post-launch errors (aka bugs). Because the developer will need to figure out the best way to build it from scratch, then test across multiple operating system and browsers (while also keeping in mind that a lot of those browsers are duplicated across the aforementioned multiple operating systems) and a plethora of mobile devices.  *Breathe*

For example, the Chrome browser is available on Mac, Windows, Android and iPhone/iPads. That is one browser across multiple operating systems with different versions in use. There’s also Internet Explorer starting at IE8, FireFox, Opera (okay, hardly anyone uses Opera), Safari and the default Android browser. (BTW, thank you, Android, for that one.) I’m not sure if it’s necessary to continue listing the reasons, but from what I just expressed, you can get an idea of why cutting-edge design work on a site can lead to poor architecture and execution. Use what is out there: It’s beautiful, functional and, most importantly, already tested.

In Conclusion

UI Developers are creative and technical, which makes us an invaluable sounding board for the team and project from the very beginning. Although we have already come a long way in staffing and leveraging the UI Developer, we still have some walls to break down.

How to Include Your UI Developer in the Conversation

First, please don’t simply ask if something is or isn’t feasible or correct off the bat. Invite your UI Developer to have a conversation and provide input, rather than requesting that he or she answers specific questions. Most of the time you will only be given specific answers anyway. UI Developers have ideas, but they want to respect the position of the designer, which means we don’t always volunteer a lot of what we’d really like to share.

My final note is for all the current and aspiring designers out there: Build a few websites. Even better, build a few of your own designs. If you don’t know where to start, ask one the developers you work with; he or she will gladly show you the ropes. The experience will open an entirely new realm of understanding for you and, in the process, make you an invaluable asset to your team. 

Do you have feedback for UI Developers on their contributions? Please comment below. 

Note from Author:

Although this post is based on my personal experience and interpretations throughout my career as a developer, I have been greatly influenced over the years by the writings of Steven Bradley on vanseodesign.com blog.

Share:

Add your comment

 
 

 

Archive

Syndication

Tagcloud

#crisis #socialmediacrisis #socialmedia #digitalmarketing #socialmarketing #strategy #influencers #communication #pr #media #ideation #creation #content #planning #culture Snapchat Snap Inc. advertising marketing social media community management brand millennials authenticity Spectacles Wearables customer customer service Paid Media Podcasts Content Sponsored Ads Content Marketing #content #marketing #media #analytics #digitalmarketing #ideation #creation #production DecisionIQ strategy big data personalization Humanizeit Facebook Facebook Live Video Instagram Stories ftc guidelines social influencer social influencers social media influencers social media broadcasting live video Processing prototype prototyping user experience ux technology programming coding java ideas design visual arts mix reality mixed realities data tutorial sketch Twitter Carousel Ads Ad Exchange Programmatic FBX Disney virtual reality projection mapping RFID Tumblr Voice Tone Axure wireframing UX software collaboration Measuring Usability UX Best Practices Designing User Journeys Stop counting clicks Designing for completion Designing for satisfaction Dieter Ram and User Experience Less is more Less but better Influencer Marketing learnability user interface user-created content gaming maker editor Super Mario Maker Nintendo digital media chat bots messaging mobile applications automation F8 Mark Zuckerberg Business F8 Conference Email office agency communication Slack Facebook at Work meetings productivity Wearable tech Healthcare Experience Patient Experience Service Design Strategy Creative Moxie VR Six Flags Six Flags Over Georgia theme parks Samsung Samsung Gear Samsung Galaxy VR headset Oculus Rift Playstation VR roller coasters Dare Devil Drive Websites Web dev development digital reactions emotion analytics dislike social metrics clicks Brands Consumers CPG Retail Consumer Marketing Consumer Insights Super Bowl Commercials Football Cultural Phenomenon Game adtech martec auto-responders automated marketing Experience Design Interaction Design Ecosystem iOS Healthkit Ad blocking Forbes Condé Nast GQ interactive media ad-light hashtags hashflags audience visual emojis campaign management 1-to-1 marketing omnichannel CES CES 2016 Oculus Sony PlayStation uSens HTC special mapping hand tracking games PetBot WonderWoof BowTie Pets OTT digital distribution Netflix Reed Hastings on-demand #yearahead #2016 #newyear #2016predictions #digitalstrategy #modernism user-generated content UGC Consumer Connection Integrated Marketing Manufacturers Accessibility usability engagement rate disability awareness creative process creativity fail fast hiring ideas imperfectionist perfectionist personnel progress test and learn fast casual restaurants social media campaigns QSR social strategies in-store promotions in-store social media promotions successful social media campaigns Logos Typography Branding #CPG #Retail #ConsumerInsights #CRM #ConsumerDirect #Seamless #OmniChannel #MoxieMakers #frontierism #intelligence #architecture insight moments Unit3C FutureX lab innovation open house Q&A UnitFilms 48in48 General Assembly Non-Profit Ponce City Market Branded design technical design style guide wireframes brand guidelines Consumer Products Interactive Marketing GIF social campaign modern marketing Cannes Lions new media pop culture meme Web Accessibility QA media media buying mobile apps targeting wires Advertisers Apple Store EasyPay self-checkout app mobile payment Sporting Events Sitecore CMS delivery Content Marketing Strategy Brand Content Marketing Content Strategy Brand Content Strategy Social Content Strategy Cannes humanity what3words life saving dot Agency Partnership Agency Relationship Competitive Review Millennial Marketers email marketing omni-channel digital marketing esp email service provider process WCAG 2016 Planning Connected Omni AR Commerce Social Innovation Create Content Strategy OMMA MediaPost Internet Week TV & Video Media Planners Creative Conundrum real-time scalability Customization smartphone loyalty advocacy live streaming content democracy Open Source Node.js Cheerio Handlebars Hyperquext MongoDB Atlassian Stash PhantomJS Shopping On-demand economy Sharing economy Everything on demand Instant delivery iPhone App Amazon Now Build Automation DevOps Native Advertising Machina Forrester SXSW Machine Learning Data Streams Web search results Data Platforms ROI Instagram Purchase Behavior Like Content Consumer Channel Role and Purpose ExactTarget Salesforce Cloud Responsys Oracle Silverpop IBM Agency Culture Innovation and Technology Client Relationships Platform Partnerships Ever-evolving Digital Age geo-fencing tablet Android second-screen Austin FOMO Meerkat scaleable vector graphics Flash animation interactivity code browsers uber-savvy consumers integrated digital-connectedness Valentine's Über Bloom that Open Table Waze marketing research google music art sports illustration sculpture food green entertainment movies photography real time marketing cheat sheet smart homes vine print 3d printing street art painting fashion influencer movie billboard outdoor mobile wallet toys film halloween history space films cars anniversary
×

PLEASE PROVIDE YOUR INFORMATION
TO DOWNLOAD THE PAPER.

Error: All fields are required.
×
THANK YOU.
YOUR DOWNLOAD IS NOW AVAILABLE.