Question of the week: What is the difference between UX design and UI design?

As in all things digital, there is not a simple answer to this. 

Designer and expert Helga Moreno put it in a nutshell though when she said this:

“Something that looks great but is difficult to use is exemplary of great UI and poor UX. While something very usable that looks terrible is exemplary of great UX and poor UI.”

Yeah. Okay.

But the difference between UX design and UI design is more complex than that.

So let’s start with UX, or user experience design. 

Most simply put, UX design is a human-first way of designing products. It’s about enhancing customer satisfaction and loyalty by making something easy and even enjoyable to use. 

While this could apply to any number of interactions between a potential/active client and a company - such as sticking two beer cans on either side of a hat and designing a stream-lined straw to go directly to the mouth -  we’re focusing here on UX design as it pertains to the digital world.

The role of a UX designer is complex and multi-faceted. It goes beyond the visual and moves into more of the realm of marketing. The UX designer is deeply involved in the structure, analysis and optimization of the customer’s experience with the company or product. Working in this capacity means being hands on with the process of research, testing, development, content, and prototyping to get the most optimal results. 

So a UX designer could really be more appropriately called a UX designer/marketer/project manager.  

But that’s just too much of a mouth full. But basically, the UX

designer’s main objective is to connect business goals to user’s needs through a sometimes arduous process of testing and refinement which will ultimately bring happiness to both sides of the relationship.  

So then does that mean the UI designer is the visual person?

Not exactly. (Because that would be too easy.)

Some would interpret the profession of user interface, or UI, designer as something akin to graphic design - sometimes extending outward to branding design and front-end development. Others are more inclined to define it in much the same light as UX design, but with more emphasis on the visual component.

Both are somewhat true and somewhat not true.

Much like the UX designer, the UI designer wears multiple hats and takes on many responsibilities.

At the end of the day though, the UI designer is ultimately responsible for taking a product’s development, research, content and layout and waving their magic design wands over it to create an attractive and responsive experience for users.  

And the UI designer is never solely responsible for the brand itself. But s/he is responsible for the translation of branding to the product. Which is sort of a big deal.

So are UX design and UI design mutually exclusive? 

This is what Helga Moreno seems to imply. And in many cases, they are. Sometimes one is just going to be more needed than the other. For example, in situations where there are multiple user types or multiple products or services catering to different audiences, UX design makes more sense. 

But there are websites that incorporate both, to some degree. Though it’s still a rarity to see both UX and UI design at maximum strength. That day when interface and experience join forces could well be coming though. 

In the Battle of First-Mover vs. Superior Product, Which One Wins?

You've probably been there...

Moved by an idea for the greatest product or service EVER. It may have been in an inspired moment while daydreaming or reading an interesting article. Or playing corn hole. Because that’s how ideas work. They show up when they feel like it.

If it’s a truly brilliant idea, you might have shared it with friends. And if they thought it was killer, you may have considered trying it out on Shark Tank. But you more than likely didn’t. Because if you did, and the big rollers bought into it, you wouldn’t be reading this right now but rather sitting by your pool and soaking in all the riches that come with the first-mover advantage. But then maybe you wouldn’t.

Because while the first-mover advantage does exist, it depends on a lot of factors. 

Depending on the situation, it works out great for some companies. But for others, not so much.

First-mover advantage is defined as the ability to edge out the competition as a result of being the first to market in a new product/service category. And sometimes it works. But it’s not enough to just cruise in with your dazzling new product, win over a bunch of people, then kick back and think you’ve got it made.

The idea is to become a durable first-mover vs. a short-term one. The durable first-mover will produce results that improve a firm’s market share or profitability over a long period of time. The short-term one is a flash in the pan and will soon be challenged and maybe even consumed by the competition.

There are two factors that influence the fate of the first mover. 

They are:

- The pace at which the technology of the product is evolving.

- The pace at which the market for the product is expanding. 

In other words, the success of the first mover relies on an understanding of how fast or slow the technology and the market are moving, and knowing when to strike. (When the coals are hot, ideally.) 

The evolution of technology.

Advances in technology happen at different rates in different industries. Take glass, for example. The first manufactured glass showed up around 3500 BCE when artisans were making glazes for ceramic vessels. Some three million years later, glass blowing came along. It then took another 1600

years before there would be lead glass. Meanwhile, a computer from thirty years ago looks like it should be in a museum of ancient history. 

And then there’s the WAY these technologies evolve. Things like computer processors evolve in a series of incremental improvements. But then there are other examples where the evolution is disruptive. This was the case with digital photography when it began to displace film. 

Basically, the faster or more disruptive the evolution of technology, the bigger the challenge for any single company that hopes to control or dominate it. The product or service can quickly become obsolete. 

But if the pace of change is more gradual, it’ll be harder for later entrants to differentiate their product. And even if they do, the changes aren’t fast enough to prevent the first mover from getting a mastery over its product and then putting it in the product line in a timely way.

Market evolution.

Market evolution can vary as much as the pace of technological evolution. For instance, look at the phone. It took 50 years for fixed telephones - you know, the old fashioned kind that are tethered to the wall - to reach a household penetration of 70%. Cell phones mastered the same feat in a mere 20 years.

When market growth moves at an initially slow pace, the first mover has time to cultivate and satisfy new market segments. Thus, it tends to favor the first mover. But if the market evolution pace is rapid, then long-term dominance is unlikely. A fast-growing market fosters the opening of competitive spaces for later entrants to exploit. This puts the first mover at a disadvantage because it often lacks the production capacity or marketing reach to serve this expanding customer base.

Still, a first-mover could get some worthwhile short-term gains in this situation, as long as it knows when to exit stage left.

And the more a product or service strays from the existing products or services, the more uncertain will be the pace of the market’s growth and its eventual shape.

Breaking it down.

Ultimately, a company will have the best chance of becoming a durable first-mover when both the pace of growth in technology and the market are slow and gradual.  Resources like product development, production, marketing and branding will not be as critical at this point - though having these in place could definitely up the ante.

But even under these so-called “perfect” conditions, there are still three things that a first-mover should consider - depending on the product or service.

1. Where applicable, create a technological edge. The first-mover doesn’t have to face competition (yet), so they have the luxury of time to gather and master technical knowledge.

2. Get primary access to scarce assets that later entrants will want. These could be things like a prime location, great suppliers and talented employees.

3. Build an early base of customers who would be highly unlikely to switch over to a later entrant because it would be too inconvenient or costly.  

Two companies took distinct advantage of this knowledge.  

Coca-Cola and Hoover admittedly got in at a good time, so they already had that going for them. But they knew how to build that early base of customers and, in Hoover’s case, get the technological edge. By a long shot.

So while today Dyson may arguably make a better product, it probably won’t put Hoover out of business any time soon. If ever. In fact, Hoover is such a durable first-mover, the good people of Britain use Hoover as a verb. As in, “Jolly good day to hoover the rugs.”

And having your company name transformed into a British verb is a real testament to the durable first-mover advantage. Wouldn't you agree?

Question of the week: Are there digital ways to track ROI from traditional advertising methods?

Well, yeah. Sorta. And sorta not. 

Let’s just say that the way of measuring and tracking the ROI from traditional advertising is far less cut-and-dry and a whole lot trickier. 

(Literally. It requires employing a trick.) And it looks a whole lot different from tracking the ROI from your online advertising methods.

With traditional advertising, tracking ROI is tough because your audience is all over the place and not tethered to a device. It’s that woman staring at the billboard while stuck in traffic or that man stumbling upon the ad in that magazine he pretends he doesn’t read but secretly loves. And those are just two examples. Then there are all the folks who got a hold of those flyers you sent out and casually glanced at them while walking into the kitchen where your radio ad just happened to be playing in the background.

So how do you know if you’re getting through to them?

The reality is, you don’t. 

You can’t possibly know about everyone who’s reading your billboard, ad or flyer, or listening to your radio or TV ad. 

And if you get a customer from any of these sources, how can you possibly know which one it was? Cue the magic. Here’s where the trick comes in. 

Honestly, it’s not that much of a trick.

You simply start by adding in a direct-response mechanism. 

In other words, drive your customers to take an immediate and specific action. And do this by supplying them with a unique URL or email address to which they can respond.  

For example, you could use a TV ad to send potential customers to a URL where they will then receive a promo code. The URL would be unique to that TV ad, so then you’ll be able to determine its success through searching traffic volumes to the URL.  

Or your direct mail flyer may entice potential customers to receive a coupon simply by inquiring about your product/service via an email address unique to that flyer. Maybe you have postcards that send them to a unique URL or email that has a link inviting them to follow you on Facebook or Twitter.

Then depending on how many people come to those specific sites or respond to those emails, you’ll have a sense of how successful the medium is.

Obviously, it is not an exact science. 

But it is a way to track your ROI by digital means, as it were. And what’s more, it’s a touching example of traditional and digital advertising coming together to play nice. 

Sorta. Maybe?

Question of the week: Why are designers returning to flat design for logos?

Let’s step into the way-back machine for a moment.

ALL the way to the turn of the century. A big 17 years ago. 

During that time, websites were getting savvy, pulling out all the stops. Flash was being added for interactivity, at least for those who had high enough speed to access a Flash site. And then there was Photoshop. Designers were all worked up over beveled edges and drop shadows - using them to make websites, and indeed logos, look more sophisticated.

Yep. The whole point of design in those halcyon days of the internet was to make a statement - to let the world know “I’m here! On the internet! Check me out!”

The more dominant feeling now is, “I’m chill. It’s all good.” 

Because, really, who isn’t on the internet? So there’s no longer the need to dazzle and impress. 

But that’s only part of it. Design trends aside, there’s one major reason for the shift to flat design. And it has to do with your mobile device.

Flat design is mobile friendly.

What makes it so?

Flat design is clean and uncluttered. It puts an emphasis on minimalism and simplicity. And when your eyes are tired, isn’t this what you want to see? Something that’s breezy, open and basic that you can easily absorb rather than a multi-layered dog and pony show with a complicated color scheme? 

Of course, we all have personal preferences. You may have an affection for dog and pony shows. But the overriding opinion is that flat design is more effective than 3-D design because the more basic the shape and color scheme, the easier you can take in the meaning of what you see. Turns out the human brain has challenges.

At this point you might be asking yourself, but isn’t a logo supposed to stand out and be memorable? Wouldn’t 3-D be more effective for, at the very least, my logo?

It’s true that your logo should be recognizable and able to stand alone.  

But if a designer tosses in some show-stopping elements like shades and borders, then the logo is locked into those chosen colors and dimensions. And that was all fine and good when backgrounds were overwhelmingly neutral. 

These days, those backgrounds are going to vary a lot more. Logos need to work on web pages, print ads, animations, displays, cards, shirts and onto hundreds of backgrounds.

So when a background changes, those elements will also require specific changes. And that’s no good, because logos are about identity. They require continuity and should feel the same no matter the circumstance. And the minimalism and simplicity built into flat design make it especially effective. It stays true to the primary visual concept.

Plus, when you get right down to it, the real estate for images on mobile devices is a much hotter commodity than on a desk top. So logos need to be simple.

A logo should be easily recognized in silhouette. And at any scale.

Flat design enables that. What’s more, web developers like flat design too. It’s easier to develop and causes far fewer hassles. Which follows right in line with the whole philosophy. 

So designers are keeping it simple. Because that’s what works. 

Making Sense of Web Design Terminology

If you’ve worked at all with web design, you may have been quickly mesmerized by the exotic flow of its mother tongue. But probably not. Unless you think that mesmerized means “crazy confused.” 

Web design terminology is addled with tech speak that is baffling to all who dare to work with web designers. 

And that would be almost all of us.

It’s not the fault of the web designers though. Every industry has its own speak. Hang around with an HVAC guy/gal for a while and you’ll get an earful of confusion. (And maybe a little freon.) 

The difference is, most of us don’t have to consult regularly with our HVAC guy/gal. But nearly every business needs to be in contact - to some degree - with their web designer. Especially at the onset of the project. Having a basic grasp of the language will ease them into the knowledge that they’re getting the most from their investment.

The following list of web design terminology is far from a Rosetta Stone for “Tech-ese.” 

But if you’re getting ready to embark on a web design adventure, it will help you to better interpret what the designer is suggesting or telling you. And it might just make the world wide web a little less wide. Though, again, probably not.   

Here goes.

AJAX

AJAX is the art of exchanging data with a server and then updating parts of a web page without having to reload the whole page. It stands for synchronous JavaScript and XML.

Absolute Link

A link from one web page to another that contains a full URL including all the information needed to find a specific site, page or document.

Accessibility

This is the measure of how accessible your site is to users with disabilities. In this case, disabilities is generally (but not always) in reference to those who are visually- or hearing-impaired. If a website has low accessibility, it will be nearly impossible for those with disabilities to use it.

Back End

The part of the website the user doesn’t see. It usually consists of a server, an application, and a database.

Backlink (aka - In/Inbound/Inward Link)

These are links from other sites back to your own - meaning that someone on another site has chosen to link to your site for some reason. Hopefully because they find your content of value.

Below the Fold

The part of a web page that requires you to scroll down to see it.

Bounce Rate

The percentage of people who leave a site from the same page they entered, and without landing on any other pages.

Content Management System

This is the backend tool for managing a site’s content. Known as CMS, it separates the content from the design and functionality of the site.

Client-side

This term refers to scripts that are run in a viewer’s browser rather than on a web server. They are generally faster to interact with, but can initially take longer to load.

Deprecated

Code that is no longer included in the language specifications usually because it has been replaced with more accessible or efficient alternatives.

FTP

This is the standard network protocol used to transfer computer files from one host to another (File Transfer Protocol). 

Favicon

These are the small and customizable icons displayed in the web address bar, located in most browsers next to the web address.

Front End

The front end usually consists of the web design and front end web development. This is the part of the website the user can see.

Graceful Degradation

This refers to a website’s ability to be able to take advantage of the capabilities of newer browsers, but done in a way that allows users with older browsers to still view the site. At least its most basic content. It also applies to the ensuring that if one small portion of your site doesn’t work in someone’s browser, it won’t break your entire site for them. They wouldn't like that. 

HTML

Hypertext Markup Language is the primary language used to write web pages and is mostly intended as a way to provide content on websites.

Hyperlink

Highlighted text or image that links from one web page to another - either on the same site or another one.

Internal Link

This is a link within the same document and is frequently used to link to a section within the same page.

Keywords

The words or phrase typed into a search engine by someone who’s searching for websites that have similar content.

Keyword Density

This is the measure of how frequently a keyword is used in a web page’s content. For example, if the phrase “monkey’s uncle” is repeated 10 times within 100 words on a web page, it has 10% keyword density.

Landing Page

This is the initial page where a visitor first enters or “lands” on a website.  

Markup

This is the term for the code that’s applied to a text document to change it into an HTML, XML, or another Markup Language document.

Meta Data

Information contained in the header that gives data about the web page that a visitor is currently on.

Outbound (External) Link

A link that takes the visitor from your website to another one.

PHP

A server scripting language which is an effective tool for making dynamic and interactive web pages.

Plug-In

The purpose of this bit of third party code is to extend the capabilities of a website without having to redo the core coding of the site.

Progressive Enhancement

A web design strategy that “layers” web technologies, allowing everyone to access the basic content and functionality of a web page while using any browser or internet connection. This strategy takes it one step further, giving those with better bandwidth or more advanced browser software an enhanced version of the page.

Pseudo-element

This is an element that’s incorporated to add a special effect to certain selectors, such as a link.

RSS

Really Simple Syndication is most commonly used on blogs and is a standardized XML format that allows content to be syndicated from one site to another. RSS allows visitors to subscribe to a blog or another site, as well as receive updates via a feed reader.

Relative Link

A relative link specifies the name of the file to be linked to, but only as it relates to the current document.

Resolution

This is the number of pixels displayed on a screen. Display resolution does not refer to the number of pixels or dots per inch on a computer screen, however, and can be altered by changing the resolution of the screen.

SEO

Search Engine Optimization refers to the various ways to achieve higher ranking in search engine results. This can be done by enhancing the content and structure of the pages, incorporating meta tags, and submitting pages proactively to search engines.

Script

Written in a variety of languages, this generally refers to a portion of code on an HTML page that makes the page more dynamic and interactive.

Server-side

Server-side scripts run on a web server as opposed to in a user’s browser. They often take longer to run than a client-side script because each page must reload when an action is taken.

Spiders (aka Crawlers)

Automated software robots that continuously roam the internet for the purpose of indexing collected data.

Tag

Used in HTML documents, these are formatting codes that provide instructions needed by web browsers to properly display web pages.

Template

Often used in conjunction with a CMS, a template is a file used to create a consistent design across a website. It contains both structural information about how a site should be set up, as well as stylistic information about how the site should look.

Usability

The measure of how easy it is for a visitor to use your site in its intended manner.

WYSIWYG

This is a page editing program that allows users to create or modify web pages without any knowledge of HTML or other code. It’s an acronym for, “What You See Is What You Get.”

Web Server

This is the computer that hosts a website and allows web pages to be sent to a user’s web browser.

Web Standards

These are the specifications recommended by the World Wide Web Consortium for standardizing website design - the purpose of which is to make it easier for designers and those who create web browsers to make sites that will appear consistent across platforms.

So there you have it.

Navigating the world of web design can be dicey. Especially if you’re a newbie. Hopefully this list clears things up a little and doesn’t further confuse you. 

Just remember that the only thing you really need to know about web design is that it’s done effectively so that your website sells your product and/or generates leads. After all, the ROI is your bottom line. 

So don’t worry if you never get a handle on all of the web design terminology. 

Interpreters are always available. Just ask any 20-something at the coffeeshop. They’ll clarify for you. 

Question of the week - If my product or service is good enough to sell itself, why should I advertise?

Before we tackle that, here’s another question.

Do you own a utilities company? Or a gas station on a great dusty plain hundreds of miles from another gas station? Or a single water stand in the middle of a huge desert?

If you answered yes, congratulations!

These would be among the rare exceptions of products or services that do not require advertising. 

They literally sell themselves. Still, all it would take is a second gas station or water stand popping up nearby to spark a need for advertising.

That’s because utilities, a tank full of gas in the middle of nowhere, and water in a desert are all NEEDS. You need heat and electricity in your house, the ability to travel across that dusty plain to escape it, and hydration. Especially the last one, which is vital for survival.

Of course the whole wants vs. needs in advertising can sometimes depend on one’s perspective. Your fifteen year old nephew might be certain he NEEDS that video game. 

Whatever the case, unless you have a monopoly on a product or service and there’s absolutely zip/zilch/zero chance that the monopoly will be threatened in any way, then you have a need for advertising. Upon last check, that was pretty much ALL of us. So if you own the electric company, you’re excused. Everyone else should read on.

Look, you may think you have the best product or service on the planet.  

And maybe you do. 

But your flawless product isn’t going to sell itself while sitting on the shelf in your closet. By the same token, if you’re vegging out on the couch simply waiting for someone who needs your stellar service to come a knockin’, you’ll be feeling pretty lonely. Until the repo man comes to get your car.

It might sound dire. 

But every product or service needs advertising. In some form. It doesn’t have to be a full-blown marketing campaign. And you don’t have to take out a 15-second spot during the Super Bowl. Or even the Puppy Bowl. 

Start with a banner on your car, some business cards, a basic website, a brochure - something to get yourself out there. And then if the product or service is truly superior, word-of-mouth will boost your sales. Depending on what you’re selling, that’ll keep you going. For a while, at least. And then you’ll need to reevaluate.

The reality is, there will always be things that need less advertising than others. 

You’ll have a much easier time selling beer, cigarettes or

coffee, for example, than you will sprouted grain bed, aloe juice or orthopedic shoes. Even if those stylish orthopedics are one of those aforementioned NEEDS, there will be a slew of other orthopedic shoe brands in the running. Or the walking, as it were.

Even so, alcohol, tobacco and drugs (like caffeine) do not actually sell themselves because there are so many brands tied up in those empires. Think about this: 

Even Budweiser, Camel and Starbucks still advertise.

Yep.

So that’s the deal. 

Get your amazing product or service noticed through advertising. Keep on keepin’ on with it. And then plan to keep advertising it… to some degree. Because no matter how good you are, folks need reminding. 

And really, it’s not that hard to do it.

Question of the week: What makes for good business card design?

First, let’s be clear that when we’re talking about good design here, we’re referring more to what should be on your card - and not so much about the bells and whistles and other design elements.

(Though it’s safe to say that from the design side, we advise against ACTUAL bells and whistles for what should be obvious reasons.) 

Creativity in marketing is a slippery slope.

Because if you have the most dazzling design-masterpiece of a business card, chances are the recipient will remember the card long before s/he remembers you or your business. It’s like that commercial that you LOVE SO MUCH IT’S SO FUNNY!, but can’t remember what it’s advertising. 

So here's what we recommend to our clients looking for solid business cards.

1. Slap your face on your business card.

Look. The main purpose of the business card is to leave a first impression that also conveniently fits in someone’s wallet or pocket. So you want it to connect the memory of you to your information. If you’re handing your card to someone who is flooded with cards on a regular basis, they’ll probably forget who you are unless there’s a visual of your face to jar the memory. Or you have blue hair. And if you’re in the fashion industry, even that won’t cut it.  

2. Get a tagline on your business card. 

What product or service is it that you or your company provides? Does your card show this? For example, a business card with a back drop of beautiful clouds with cars bursting through them isn’t telling anybody anything - except that you have a vivid imagination or perhaps some other issues. You (or a writer) need to come up with one short line that demonstrates your personality, while making it abundantly clear what it is you do.

3. Make your business card unique.

Speaking of demonstrating your personality, a good business card design will leave a strong impression. But not too strong an impression. (i.e. Bad.) Take some time to think about how you want to come across. Add some color, get creative with the fonts, etc. But keep in mind the culture of your industry. As mentioned above, a lot more is going to be kosher in an industry like fashion than in one like finance.

4. Keep your business card professional. 

After you’ve established the unique flair you want for your card, there needs to be a single phone number and email address on your card through which you want to do business. Keep in mind that if you’re still using the email you set up in high school and it reads something like captainmoron@netscape.net, then you seriously need to get your own domain. You must have a reputable email address on your card. Nobody wants Captain Moron doing any job for them. 

5. Stick with the essentials on your business card.

No one should need to take a magnifying glass to your business card in order to see EVERYTHING that’s on it. Our designers at LeDuc Creative encourage clients to not go beyond the company name, title, name, address, phone number, email address and web site. If you have some links to your work, that’s okay. Just try to corral them onto a single landing page on your site, and then provide that link on your card. 

Our designers also encourage simplicity. And they strongly advocate for the traditional rectangular business card. 

Why?

Because until all business card cases or wallets are universally changed to be in the shape of circles or hearts, it just makes sense.

There’s something to be said for tradition.