Selling UX Short With the 50% UI Role
First published by Pat Godfrey: September 2017
"UI design" has wrongly become confused with art direction or visual design.
Great UI design is 100% UX
UX and UI design are not graphic design or art direction: they feed it. I am a 100% UX designer and I shine brightest when paired with 100% art direction in a team where every specialty has a 100% UX focus. I use 100% UX methodologies to design an inclusive, accessible, usable, and learnable UI. My strengths do not lie in graphic design although my skills will feed the art direction.
I believe the 50% UX and 50% "UI" (art director) recruitment and design myth has been encouraged by graphic designers uncertain of what UX is. They now recruit like for like.
Perhaps the enterprise doesn't know what UX or UI design is, only that it is needed? UI design and our users' experience of it is much deeper than its visual appeal, or who likes it.
Mistakes, compromises, and ignorance
We all make mistakes, compromises, or have so much still to learn. There are examples of each on this website, which I have created solo. As a part of a multidisciplinary and 100% UX team, we can only improve our individual impact.
Flag this content to your friends, connections, and colleagues.
UX maturity and 'unicorns'
The term, "UX immature" describes an enterprise hiring a 50% UX and 50% "UI" (graphic) designer: a "unicorn".
It was coined during Ronan McConville's event, "UX Today & Tomorrow" hosted by Morgan McKinnley in Dublin on September 7th, 2017. Ronan's panel comprised Kelly Link, Phil Dwyer, Claire Bauden, and John Wood.
UX Maturity is difficult to define. Do you know the signs..?
Even "UX mature" organisations set graphic design and art direction "UI" recruitment assessments to find their UX Designers. Are the "lunatics" running your "asylum", too?
It seems clear that an enterprise's UX maturity depends on what "flavour" of designer they specify to recruit, or promote to lead positions:
- Flavour A: a 100% User Experience (UX) and User Interface (UI) designer who understands the importance of great visual design.
- Flavour B: a 50% User Experience (UX) and 50% graphic design talent and art director ("UI").
I recommend flavour A: the UX and UI designer an enterprise needs to help grow their UX maturity.
If an enterprise wants Flavour B then maybe they believe in "unicorns", don't understand what User Experience is, or restrict the resources needed to assure their UX maturity and success?
What do UX and UI Designers do?
Our digital and recruitment industries cannot define what a Universal, User Experience, or User Interface designer do, yet alone agree on whether we are designers or architects, etc. The whole role is confused across the employment landscape.
If you believe you need a UI Designer to grip your Art Direction ask if they are skilled in UX and UI strategies and activities? I don't doubt such cross-specialties exists as there are so many talented people in our niche. However, if you need a medical scan you want a radiographer to perform it and not the person who polishes it? The same for UX designers, UI designers, and art direction although a great graphic designer will be 100% UX!
I am a qualified 100% UX and UI designer. Art Direction is an interest and not my specialty. Here's what I do when embedded with your teams.
|Universal Experience Design||
Universal Design activities are concerned with:
Universal Design activities are defined according to competing contexts. My preferred approach to universal design here deals with our users' experience of our whole enterprise. An alternative is that it deals with micro and meta data strategies in the user interface, which I believe are best placed within the User Interface Design activities.
|User Experience Design||
User Experience Design is concerned with getting the who, what, when, where, and how of digital delivery right. It explores the environmental, physiological, and psychological wants and needs of our users toward meeting our business and enterprise objectives. Activities include:
|User Interface Design||
User Interface Design is concerned with the visual and non-visual presentation strategies involved in delivering our service and products to our users. Although *Art Direction is included in the activity list, the ideal Art Direction solution is to give it a qualified Graphic or Creative Designer. There's much more to UX and UI design than the Art Direction!
...the job title 'User Experience Designer' is becoming one of the most abused titles in the tech industry, full of fancy User Interface (aka, graphic) guys who’ve added wireframes to their portfolios and claim to be UX experts. Sounds harsh? Perhaps...
A light-hearted article by Emil Lamprecht, 7 Signs This Person Isn't Actually a UX Designer
Why are graphic designers so attractive?
Come on! Graphic designers are beautiful people! What's not attractive about them? Some even smell good. No wonder everyone wants to hire one even if they don't know what they're called any more.
They create smart art direction on what colours to employ, typography, white-space, and what shapes convey what. They can excel in the visual design of digital products and we cannot do without them in the presentation space. Graphic design is its own science!
It's just that our digital product is not all about the visual experience. Even fully-able users exhibit learning differences and preferences, cognitive and emotional complications, and a healthy distrust. They want great content, easy transactions and flows, and tasks that only meet their objectives. Looking pretty alone just isn't going to cut it. You need to partner up your graphics specialist with a 100% UX and UI designer to make best capitol.
And nor will a clever interaction-filled user interface crafted by your 100% UX and UI designer succeed without the close support of our graphic designer. They are symbiotic: not options.
I'm a 100% UX and UI designer and I work best with a team that's 100% UX inclusive of their specialties. I know the value of the graphic designers and their pink hair or fluffy beard, heavy rimmed spectacles and super-expensive MAC cases of envy: not for "skinning" a product, but for their collaboration toward producing best-in-class user experiences and conversions that work above and below the presentation layer.
They also communicate well with our developer and engineering friends - you know, in simple pictures they can follow and stuff... 😜
The 100% UX perspective of UI
UX and UI disciplines are not markedly different. Depending on the individual designers' backgrounds, the responsibilities will usually overlap around interaction design. UX and UI is symbiotic, each specialty with the unique insights that their 100% specialties bring. Perhaps we are all 100% UX and UI?
Our industry however, credits the 50% UX and 50% UI designer with giving great graphics (art direction) and a fabulous user experience. It may be true for some graphic designers. In the past, they were given the sexy creative tools. They attended (Macromedia) Flash and Fireworks training courses, etc. and by default, many became the interaction and UI designer de jour.
Starting as a learning designer and early eLearning adopter, I took the same courses to test and prove my UX and UI design and to ensure it survived into production. I had to buy my own creative toys, is all: not that I'm still bitter.
Today, we are uncertain of anyone's skills in UX, UI, or graphic designer because the industry has made such a soup of our titles and requirements.
Is our graphic designer-cum-UI designer competent with the full-stack of UX or UI skills and knowledge that we expect of our 100% UX designer? Portfolios of finished pretty designs and skills with Photoshop may not demonstrate the depth of research and business acumen, empathy or creativity, or understanding of inclusive or technological UX strategies applied under-the-hood.
50% UX examples
The following are examples of superficially broken layouts and confusing contents from the random tabs open in my Google Chrome browser one evening. We don't need to look hard for issues.
Each example highlights the ragbag edges that can appear when your 50% UX / 50% "UI" (graphic) designer is spread too thin too quickly and when your team fails to follow a 100% UX design workflow, combining HTML-based design with quality assurance processes.
UX design does not stop with handing off to our developers, and forms a cohesive link in the quality assurance of our products too.
Learning from the Learning Industry
Our users are learning from the moment they open our page or app. They look for orientation to known patterns and are frustrated by the distraction and effort of learning new things they cannot use beyond our interface.
As users we instinctivly compare new experience with existing experience. The gaps between are where learning must take place. Design the UI to focus learning on your enterprise content.
There is too much emphasis on look and feel in 50% UI design and too low a priority on how we deliver our content - the learning - for our user.
Conversations about the presentation layer turn out to be very subjective. Instead of how the learner engages with content, there are personal evaluations of colour pallets, fonts, screen layout, illustration styles, etc. Of course screen design matters - but only when it serves instructional design. For some reason, we have developed a habit of jumping straight from structure, combination, and sequence to screen design...
...What's important at the presentation layer is the embedding of knowledge and skills.
Don Morrison (2004). p267 E-Learning strategies - how to get implementation and delivery right first time. John Wiley & Sons.
Cognitive or learning design is an essential part of the 100% UX workflow. We must design for our users' environment and emotional state, their preferences, and their learning styles.
As with everything in design, it depends. Within a busy classroom we may sometimes get wrapped up in the middle ground; the compromises between delivery to individuals and delivery to the median. Students either side of the median miss out and become disengaged. For example, the ideal learner group size may be 6. Why have school classes of thirty except to reduce resources supporting teachers and learning spaces?
This is a matter of resources. Limit the design resources and you limit the content's delivery to the median of users - a scalped bell curve of persona mediocrity. That is where 50% UI design is leading us.
Example1. Content decisions
Example 2. Enable learning
Example 3. Link writing for UX
In addition to accessibility and usability guidelines on writing for the Web, there are many writing 'standards' available to aid us in our writing for UX. We should start with the content, after all.
Example 4. Responsive design
Example 5. UI alignment solutions
Building a digital presence "professionally" takes research, analysis, design, development, and evaluation such as that enabled within my own UX design process with ADDIE. From CSS2, we learned that we could not present our digital layout as exactingly as a print layout. With CSS3 and Design Systems, now we can.
Picking on Budget Website Vendors
Using budget vendors is a necessary compromise for small enterprises without the time or resource to DIY or "go professional". Sadly, a €500 service is unlikely to give a €20,000 result. However, if an enterprise must rely on their vendor for their digital growth, then even a graphic designer and developer partnership wielding trite templates "out of the box" should deliver at the least a minimal quality.
It staggers me how for €500, a team can create your content, shoe-horn it into a template like it's Cinderella's slipper, and complete the SEO for "top Google search placement". And then, I reflect and thank them for being there at all. Our small enterprises need any help they can get.
Medium budget vendors
This example is from a "big league" WYSIWYG website vendor I was considering engaging with as a reseller to help small businesses. All I want to do is to send them a link to my article outlining my "Fluid Responsive Design Philosophy" 😉.
A smart workaround
We can totally control these layouts using intelligent HTML and CSS or we can create design capitol as Typeform have:
Example 6. Graphic design
Example 7. Trust and credibility
In their book, "White Hat UX: The Next Generation in User Experience" (available on Amazon.co.uk), Trine, Kim, and Martin characterise ethical and honest UI design as "White Hat". The antithesis is "Black Hat". In between lies "Grey Hat".
In this example of "Black Hat" or "Grey Hat" UI, we are hoodwinked into enabling permission for the company to sell on our personal data. The point is, if we cannot trust the owners to be honest here, what other conniving thievery are they up to with our account?
Example 8. Responsive video
An often encountered responsive video presentation error lies in the player's CSS and HTML scale attributes. Using a code Inspector, even a non-technical can fiddle with the settings until the player responds to our will.
A responsive video presentation supports our user's experience. It ensures the player remains in view. HTML5 video opens opportunities to style and transform the presentation, too.
Note: stock video-background music can drive you nuts. I compose and produce my own video-background music: I design the experience of being driven nuts 😜.
It can happen to us all?
Every day, you use bad products. Websites that don't make sense. Doors that open the wrong way. Things built the easy way or cheap way, rather than the right way.
…big companies employ mediocre designers as well as excellent ones. There’s no guarantee that a solution is right just because it’s on a famous website. It might just be there because no one got around to changing it.
P.2, P.118, Bowles, C. and Box, J, Undercover User Experience, New Riders (2011).
Our products will always have UI "issues" at one time, or another. Building a digital environment is complex. A 100% UX workflow will result in many less issues because the team works more closely together to identify them throughout design.
Many of these UI issues appear superficial. If a client is wanting to pay a gazillion dollars for a digital platform or to subscribe to a Standard, then we need to know that the vending team can identify and manage simple issue in their own environment. These issues need a higher priority. Else, how will the vendor manage our product? Each issue is then very expensive.
100% UX design involves the discovery and the solution of our users' emotional and environmental needs, differences in learning and activity styles and abilities, conservation of motor and cognitive effort, engagement and motivation, and above everything sequenced information.
The visual UI design is a part of the experience, but it is not everything.
Return on investment
If you want a 50% UX and 50% (UI) graphic designer you will get 50% UX and 50% UI that looks great, and may fail to achieve your mission. You may believe that you are saving on payroll, but the time taken to fix pretty and broken products, or lost in losing emigrating customers will quickly compensate any perceived additional costs in hiring both a graphic designer AND a 100% UX and UI designer.
The compromise may show issues such as the examples above. Worse, if the department is run by a graphic designer then visual design and art direction may overrule sound UX research and design. The issues may never be identified because maybe "the lunatics have taken control of the asylum"?
UX is deeper than the presentation layer. Be sure to engage a 100% UX designer.
Engage a UX design workflow
Both the graphic and UX/UI designers should communicate design using HTML. Illustrations in Photoshop or Illustrator are for their own consumption, not the team's. Combine their specialties with a modern 100% UX design workflow, and your products will be researched, designed, and executed optimally. The world of 2D static illustrations and specifications will break on our dynamic viewports.
Note: for strength in depth, consider adding a business analyst and copy-editor to the team and flow. It's worth every cent.
Reference this article
Godfrey, P. (Year, Month Day). Article Heading. Retrieved Month Day, Year, from URL
Contribute to this article
Please add your comments.