When you shop online, there’s very little effort involved in anything you do, including abandoning your cart. Simply close the tab, and that’s it. When you’re on the other side of the cart, however, it means that all that effort and time you spent to get them to that point is flushed down the drain.

Some Shocking Statistics

The fact is shopping cart abandonment is the most difficult roadblock for online retailers to get past. According to the digital marketing platform Listrak, an average of 81% of shopping carts are abandoned. Others report the number as 73% for desktop users, on tablet 80%, and 85% on mobile.

This article reports that 68% of all eCommerce sales were via a mobile device, which means that the percentage would be even higher if more mobile users actually went all the way to checkout.

Think about those numbers for a second. At best, it means that for almost every seven people out of ten that shop on your online store do not go through with the purchase. It’s enough to make you weep, isn’t it?

Of course, that is the average, which means there are retailers that get much better results than others do, and your goal is to be on the winning team. To do that, you should learn from the mistakes of others before you also become part of a sad statistic.

These proven tactics can help you avoid shopping cart abandonment on your eCommerce site as much as possible,

Use Familiar Trust Signals in Your Transaction Form

Remember that song “Trust In Me” from the Jungle Book, where the treacherous python Kaa tries to lure Mowgli into his coils? That is essentially what you are doing with a transaction form without familiar trust signals. You’re telling your buyers to trust you blindly with sensitive personal and financial information.

That’s fine if they do, but unfortunately for you, 61% of shoppers say they will abandon their cart because there were no security logos, and 75% will do the same because they didn’t recognize the trust signal you put on your trust form. Surrender to the inevitable; place a recognizable security logo on your transaction form.

Be Upfront About Added Costs

Your promotion or sales pitch was successful, and you get your shoppers to click on the ‘Buy Now’ button. Lo and behold, you hit them with shipping costs and other fees, and they abandon the cart. A whopping 44% will not go through with a purchase when they perceive the shipping and handling costs to be too high.

More importantly, unexpected shipping costs at checkout is the number one reason for shopping cart abandonment. Shoppers don’t like nasty surprises.

If you can’t afford free shipping, then at least be upfront about it. Let your customers know how much they should expect to pay before they add the item to the cart. If they add it to the cart anyway, they are less likely to abandon it.

Go for Free Shipping

According to a report from UPS, 38% of shoppers state that they have purchased from a site because of a shipping offer, and 39% are willing to purchase enough to qualify for free shipping.

It is obvious that going for free shipping for your eCommerce site is a great way to get people to go complete the checkout process, so it is worth considering.

If you will incur considerable costs to offer free shipping, crunch the numbers so that your customers will buy enough to make it worth your while. It works for Amazon, why not you?

Have a Retargeting Strategy

While your goal is to have 0% shopping cart abandonment, that just isn’t going to happen. There will always be people that will abandon their carts even if you do everything right.

The good news is about 72% of people that abandon their carts have some intention of coming back. Your best reaction is to retarget those customers by sending them an email reminding them that they haven’t completed their purchase and maybe offering them a freebie or other incentive.

Have a Cart Icon Visible at All Times

Sometimes, people abandon their carts because they were distracted by a burning smell in the kitchen or they had to go to a meeting.

It is important to remind them about it the next time they visit your site by having a cart icon clearly visible that displays the number of unbought items, or they’ll simply forget.

Make It Easy for Them to Buy More

Shopping navigation has to be a seamless experience to encourage people to buy more. If they click on a product, which brings them to the cart, you should have buttons on that window that allows them to “Continue Shopping” or “Proceed to Checkout.”

If you make it hard for them to get back to the product pages, you might frustrate them, leading to just the one purchase, or worse, cart abandonment.

Offer Several Payment Options

Online shopping is convenient in many ways, but it has its downside. One of them is the availability of the preferred payment method. Some people prefer PayPal or similar, others want to pay with a credit card, while still others prefer mobile payment systems like Apple Pay.

If you don’t offer the payment option they want, they will go elsewhere. Sure, it’s a hassle, but you want their money, so make an effort to give them what they want. Have as many payment options as you can manage to capture more sales.

Accommodate Guests

Registering an account to buy a $2 item is a pain, and most people simply won’t bother. Don’t force your buyers to create an account to buy. You can make account creation optional, so it is easy for them to make a purchase anonymously through a guest checkout.

Maybe later on, when they are regular customers, they won’t mind doing so, especially if you offer them an incentive to do so, such as a discount code for their next purchase.

Streamline the Checkout Process

If you are playing an online game, going through several stages to get to the Big Boss is a good idea. Not so much when you’re trying to sell something. For that, you want the checkout process to be ridiculously fast and effortless.

Reduce the number of pages your customer has to go through to get to the checkout to as few as possible. Remember that each click they have to make increases the chances of abandonment, so keep the count low.

Activate Exit Pop-up Reminders

You’ve probably seen these several times when you’re about to leave a site. A window pops up that asks you if you’re sure you want to leave the page.

On eCommerce sites, these pop-up windows usually come with some incentive for you to keep on browsing, such as a reminder that you still have items in your cart or a discount offer for concluding the purchase. It is very effective, and easy to implement

Offer Them Their Money Back

Finally, convince the fence-sitters to take the plunge by offering them a no-questions-asked money back guarantee. It reassures the customer that if they change their mind later on, or they’re not satisfied with the product or service, they don’t risk anything by giving it a try now.

It also makes them trust your site more, because you stand by your product or service.

Don’t be under any illusions; you will still have some cart abandonment on your site. However, if you follow the foregoing suggestions, you reduce the risk considerably. Any decrease in your cart abandonment is well worth the effort in the long run.

The post Proven Tactics to Avoiding Shopping Cart Abandonment appeared first on Speckyboy Design Magazine.

The problem for designers is that, while some parts of accessibility are fairly obvious (like adding alternative text to images), other facets aren’t as widely publicized. Plus, we often depend on third-party items like themes, plugins, et al, that may claim compliance – but how do we really know?

The other question many designers may have is: When is a website accessible enough? In other words, at what point does a site cross that threshold to being accessible?

Designers (including yours truly) have a lot of questions about accessibility. So, we’ve enlisted the help of Joe Dolson, an accessibility consultant who is both knowledgeable and passionate about the subject. He’ll provide some insights into some of the most vexing questions we face.

Read on to get a better understanding of web accessibility and discover some helpful resources to point you in the right direction.

Missing Pieces

Accessibility encompasses a vast array of practices and techniques – more than we may realize.  Even those of us who think we have a decent handle on accessibility issues may be missing some important elements.

“When developers and designers start to learn about accessibility issues, they usually start by focusing on issues for people who are blind.” says Dolson. “This results in missing two areas of accessibility that are crucial to sighted people with other disabilities.”

Visual Focus

The first item on Dolson’s list is Visual Focus. He explains it as such:

“Visual focus is the ability to visually identify where you are on a page as you navigate using a keyboard. If you press the tab key to navigate through links, form fields, and buttons on a page, you’ll frequently find that you are unable to distinguish where you currently are on the page – this is due to a lack of visual focus.”

Learn more about Visual Focus: https://accessibility.oregonstate.edu/focus

Enlarged Text

Another missed element of design is – what happens when a user enlarges the text? Dolson elaborates:

“Enlarging text is crucial to people with low vision, who may need to enlarge text to several times its normal size to be able to read it. There are a few different problems this can cause: overlapping text, horizontal scrolling to see the entire page or extremely narrow columns where the text wraps every few characters can all make the page very difficult to consume.”

Accessible Content Strategy

When adding content to a website, sometimes the easier thing to do is to write a blurb of text and link to an attachment file, such as a PDF, that contains more information. But, is this the best practice for accessibility?

Dolson says that attachments should be made accessible, but notes “It’s the content of your document that needs to be accessible – and that can be accomplished in a wide variety of ways. You could make an argument that an accessible web page would constitute an alternative to an inaccessible PDF.”

So, while the content of PDF files and the like should be made accessible, it may still be preferable to take that same content and place into HTML.

Learn more about Creating Accessible PDF Files: https://webaim.org/techniques/acrobat/

Utilizing Tools to Find Potential Problems

One of the great advancements in creating accessible websites is the availability of tools that can help you sniff out issues. According to Dolson, these tools “…have an invaluable role in the process of evaluating for web accessibility”. However, he cautions that, “…while they are important, they are in no way something that can substitute for human judgment and review”.

WAVE (Web Accessibility Evaluation Tool) is one of the best known solutions out there. Paste in your site’s URL (or, better yet, use their Chrome or Firefox extensions) and WAVE will load in the page with a sort-of heat map of what’s good and what’s not. It will catch things like missing alt tags, form labels and even point out color contrast issues. You’re then able to click on specific errors and see them highlighted right on the page you’re currently testing.

It’s a tool that really shows you how easy it is to miss certain things. But it’s also good for pointing out deficiencies in third-party plugins and themes.

Once a tool like WAVE has found any issues, you can then go through the process of manually applying fixes. Dolson points out, however, that there can be a bit of an issue with alt text that tools won’t necessarily detect. He says “…an automated tool can only tell whether or not your image has alternative text provided. What it can’t do is determine whether the text is truly an appropriate alternative to the image.”

So, while a tool like WAVE can make your life much easier, you’ll still have to do a little sleuthing to ensure accessibility.

Learn more about Alternative (ALT) Text: https://oregonstate.edu/accessibility/alttext

Are You in Compliance?

Here’s the question that can really cause some confusion for designers and site owners. In fact, even accessibility experts aren’t able to provide an absolute declaration. Dolson explains the challenges:

“The first challenge is identifying what the law actually dictates about the accessibility of your web site. This will vary depending on who pays for your web site, what segment of industry you’re in, and what country your web site is liable in (which is a separate and even more complicated question!). Within the United States, accessibility is governed largely under the Americans with Disabilities Act of 1990, or ADA.

The ADA dictates that places of business should provide equal accommodation for people with disabilities – but, as you can surmise from the date of the act, it doesn’t actually include any information about what would constitute an accessible web site. There are specific guidelines covering US Federal Government web sites described in Section 508 of the Rehabilitation Act of 1998, but that’s a completely separate body of law, and you can’t draw the conclusion that the ADA would or should follow the same guidelines.”

So, it’s complicated to say the very least. In Dolson’s view, following the Web Content Accessibility Guidelines (WGAC) 2.0 will at least give you some sound defense should you be legally challenged.
* As always, be sure to consult a legal professional for advice specific to your situation.

Advice for Testing Your Site

In addition to testing for and fixing errors through an automated tool, it’s also advisable to do some testing on your own. This way, you’ll at least get a sense of what the user experience is like. Among Dolson’s suggestions:

Use a Screen Reader

Mac or iOS users can enable the VoiceOver feature. Windows 10 has a built-in Narrator feature. Or, you may want to install a third-party app like NVDA.

Unplug Your Mouse

Try navigating your site using only a keyboard. Here are some tips for enabling keyboard access.

Increase Fonts

Zoom in on your site to make its text 400% and see how it affects layout.

Install Browser Extensions

NoCoffee is a free Chrome extension that will simulate color blindness and other vision problems. RGBlind performs a similar task for Firefox users.

Utilizing these methods is a great way to at least give yourself an idea of how accessible your site is. But they shouldn’t be considered a full-on simulation. Dolson advises that these tools, while valuable, aren’t always an accurate representation. For example, experienced users of a screen reader will probably have a different experience with your site – especially if you’re not familiar with using such software yourself.

Worth the Effort

As we have learned, there is a lot to consider when it comes to accessibility. Thankfully, there are some very useful tools, resources and experts we can lean on to get us going in the right direction.

Ideally, the practices and concepts discussed above should become just another part of your typical site design and build process. That way, it will become second-nature to you – just like HTML or CSS. Slowly but surely, it will help lead us to a more accessible web.

The post The Challenges Web Designers Face in Ensuring Website Accessibility appeared first on Speckyboy Design Magazine.

We put together a list of points for you to check before the design is signed off. Please note that not all of these points apply to all products, but generally, these are the most relevant ones.

Interaction Design

1. Repetitive actions or frequent activities feel effortless

Why it matters: Repetitive actions for the same output (for example, filling different forms with the same information) is a strenuous task that doesn’t help the user achieve their goals faster or better. The user is likely also to try to find a way around it: for example, looking for competitors who can help them to do it faster/better.

How to test it: You should start by analyzing all of your product’s flows and observing the user’s behavior. You want to make sure that, if repetitive actions are present, there is a way of facilitating them: an option to use previously entered information.

2. Users can easily recover from errors

Why it matters: Oftentimes, users perform unintended actions or actions that didn’t lead to desired results – and allowing them to go back and try again means they won’t be frustrated and will recover easily and keep moving on the flow.

How to test it: First, make sure that your navigation system allows for going back, and that actions can be undone. Then, when conducting usability testing, create scenarios where the user will most likely perform the wrong action and check if s/he can easily recover.

3. Users are adequately supported according to their level of expertise

Why it matters: It’s important to make sure that novice users in your product have a smooth learning experience. However, once they are already familiar with the product, that should give place to tools that help them move faster through the flows. Both scenarios improve usability and retention. For example, shortcuts for expert users, tooltips for novice users, etc.

How to test it: First, check if you have tools for both audiences. Then, conduct usability tests with novice and expert users to see if these tools are being used properly.

4. Accessing help does not impede user progress

Why it matters: Users ask for help whenever they are stuck in a certain part of your product. It is important for help – online or offline – to be additional and allow the user to resume work where they left off.

How to test it: Create test scenarios where users will ask for help and see whether their workflows and progress are interrupted.

Visual Design

5. No more than three primary colors

Why it matters: This isn’t a fixed rule – and sometimes, for specific cases, more than three primary colors can be used. However, keep in mind that combining three colors is already difficult, so for most cases, more than that should be avoided.

How to test it: Make sure that the color palette you used when designing the product has no more than three primary colors.

6. Color alone is not used to convey hierarchy, content or functionality

Why it matters: Having a product that is accessible is not a plus – it’s a must. People with visual disabilities, such as color blindness rely solely on color to convey hierarchy, content, or functionality. This means they will not be able to use your product and will be an excluded demographic.

How to test it: colorfilter.wickline.org will let you put a color filter on top of your webpage and test it for different kinds of color blindnesses. You can also screen-capture your product and convert that to grayscale on an image editor and see if you can tell colors apart easily.

7. Visual hierarchy directs the user to the required action

Why it matters: Users rely on the product’s hierarchy and clues to know what to do and where to go – it is essential to understand this and properly guide them using that hierarchy.

How to test it: Understand how the flows inside your product work and whether its key actions are being incentivized by visual hierarchy.

8. Items on top of the visual hierarchy are the most important

Why it matters: Visual hierarchy allows users to quickly scan information, prioritizing content based on their immediate needs. Items near the top of the visual hierarchy must be most important to the business and most relevant for users.

How to test it: Screen-capture your digital product, then Gaussian blurring that screenshot to a radius of around 5px. When looking at the result, you’ll instantly visualize the hierarchy and notice which elements stand out. Are those the most important for the business and user?

9. Primary action is visually distinct from secondary actions

Why it matters: Having distinct primary and secondary actions means the user won’t be confused when interacting with your product and will be less prone to making mistakes. For example, “Submit” and “Cancel” must be clearly distinct.

How to test it: When conducting usability testing, observe for common errors that result not from the user’s intent but from poorly distinct primary and secondary actions. Also, when reviewing the design, make sure that color, size, positioning, and other elements differentiate the actions.

10. Interactive elements are not abstracted

Why it matters: When using a new product, users come with a set of expectations built from previous experience using other digital products – for example, what buttons should look like and how they should work. Fulfilling those expectations means you aren’t creating unnecessary friction.

How to test it: First, review your product looking for areas where common patterns are not used. For example, links that don’t look like links.

11. Form submission is confirmed in a visually distinct manner

Why it matters: It is essential to give the user confirmation of whether an action was successfully performed or not. For example, after submitting a form, a clear confirmation message in the form of a color banner will mean that the user can move on to the next task.

How to test it: Check all areas of your product where the user inputs information. After user input is complete, trigger a confirmation regarding whether that action was successful or not. Make sure the feedback is crystal clear regarding the end status.

12. Alert messages are consistent

What it is: Alert messages have the same visual style and appear in the same location in the same manner.

Why it matters: Having consistent alert messages means the user will always understand what immediately deserves attention. Not being consistent with the alerts would mean extra mental load every time a new alert pops up.

How to test it: Ensure alert messages have the same visual style and their positioning is similar or identical.

13. Alert messages are visually distinct

Why it matters: By making sure that alert messages are clearly differentiated from other screen elements, the user can actually notice and/or act on them.

How to test it: After checking for visual differentiation yourself, see how users react to the alert messages in usability testing.

Information Architecture

14. Navigation is consistent

Why it matters: The way users orient and then navigate through your product directly influences whether they can complete their goals regardless of their current page.

How to test it: Check your information architecture documentation and make sure that navigation is reachable on every page and that it doesn’t change or disappear. Before diving into visual design, try card sorting or tree testing to ensure your information architecture pathways are as intuitive as possible.

15. Room for growth

Why it matters: You can’t redesign a product’s navigation and information system every time new features or content arises. Navigation menus and the overall layout needs to support more categories/topics without breaking. Designing with room for growth means that major design and development efforts scale easily across the interface.

How to test it: Ask all stakeholders about how content might grow over time in the product. Will you support more static content? Will the architecture need to support videos?

Typography

16. No more than two distinct type families are used

Why it matters: This isn’t a fixed rule. Sometimes it’s possible to pull off more than two. But generally speaking, matching more than two is not an easy job. For usability and visual purposes, sticking to two simplifies your typographic hierarchy, which improves comprehension.

How to test it: Make sure that your design isn’t mixing more than two type families. It would help if you also made sure that the families you chose are properly matched (learn more here).

17. Fonts used for text content are at least 12px in size

Why it matters: Again, it’s not a fixed rule – you could, in theory, use smaller sizes for particular purposes – but generally speaking, readability is severely reduced for sizes below 12 pixels.

How to test it: Check all your content and make sure that the fonts used for them are sized at at least 12 pixels.

18. Reserve uppercase words for labels, headers, or acronyms

Why it matters: Limiting the use of uppercase words is known to facilitate understanding – it is less visually heavy and easier for the user to digest. It should be used specifically for emphasis or very restricted cases – acronyms, for example.

How to test it: Run a thorough content check and make sure that uppercase words are limited to either only headers, labels, or acronyms.

19. Different font styles or families are used to separate content from controls

Why it matters: There need to be clear indicators as to what is content and what are controls – that is, what the user can interact with. Those indicators can be size, color, positioning, font, etc. The font is an important one: using different styles or families means that the user won’t be confused and will easily identify what can be interacted with.

How to test it: Identify all controls in your product and make sure that they are standing out from the content. When running usability tests, pay attention to whether users are having difficulties interacting with controls.

20. Font size/weight differentiates between content types

Why it matters: It heavily impacts readability and comprehension. Making a clear distinction between headings, subheadings, and paragraphs reduces the mental overload in digesting that content. It also has got visual benefits – it looks and feels better.

How to test it: When reviewing the content inside your product, make sure that headings, subheadings, and paragraphs are using different font sizes and weights.

User Interface

21. Proximity and alignment

Why it matters: The user has a tendency to group – functionally or contextually – items that are close to each other. A navigation bar is a good example of this. Following this pattern and grouping items that are connected means the user instantly understands your interface.

How to test it: Look for items that are similar in functionality and check if (when possible) they are grouped together.

22. Progress indicator for multi-step workflows

Why it matters: Especially for multi-step workflows, the user can easily feel overwhelmed or wonder how long until it is finally done. A progress indicator helps them to locate his/herself, but more importantly, it creates a sense of accomplishment and reduces drop rates.

How to test it: Check all the flows inside your product where there are different steps to accomplish something, then make sure that progress is being indicated through an indicator.

23. Foreground elements (like content and controls) are easily distinguished from the background

Why it matters: Important for people with visual disabilities. It also improves a user’s learning curve and comprehension. Clear distinction facilitates navigation, brings more attention to buttons, and increases usability in general.

How to test it: Screen-capture your product and Gaussian blur that screenshot to a Radius of around 3px to 5px. When looking at the result, can you easily tell what’s in the foreground and what’s in the background?

Congratulations on going through the list! However, this is not the end.

Your product is now more solid, and you might have improved in several areas – maybe it is more accessible now, for example – but remember always to keep testing, gathering user feedback, and keep on iterating.

The post The UX Design Checklist appeared first on Speckyboy Design Magazine.

A client may be pleased with themselves and happy to get their own way. But at what cost? The ensuing results aren’t always pretty. Crowded layouts, inaccessible design elements, and a general sloppiness can seriously harm the user experience (UX).

For example, consider a client who meddles in the design details of their eCommerce website. Leaving UX decisions regarding product layouts, calls-to-action, and hero areas to a non-designer could be disastrous for sales. And yet, any potential fallout may land squarely on your shoulders. Fair? I think not.

Therefore, it’s up to us to prevent such silliness from happening in the first place. Let’s explore some ways to keep clients at a safe distance from UX.

Define the Stakes

User experience is a critical factor for every website. Yet, clients aren’t always fully aware of what’s at stake. As is often the case, it’s up to web designers to provide some background.

It’s worth taking the time to talk about the importance of accessibility and ease of use. How the design of each element within a page needs to be measured against these factors. Oh, and the massive roles that performance and mobile compatibility play as well.

Then there’s the matter of personal preference. Clients often (and unwittingly) put their own opinions above the needs of the average user. Sometimes, implementing their preference is a detriment to everyone else.

The importance of UX and its contributing factors should be brought up from the very start. When clients are informed, they’ll be more likely to follow your lead.

Welcome Feedback, but Set Boundaries

How does a client go from providing useful feedback to taking over a designer’s job? It’s often subtle and can happen quicker than you think.

To be sure, some people insist on having control of a given situation. They may be just as likely to stand over the plumber fixing their leaky pipes as they are to pester a web designer.

In other cases, the mere fact that a client is paying good money for your services gives them a certain sense of entitlement. And although they may be well-meaning, it can lead to overstepping boundaries.

The dilemma is that getting a client’s feedback is necessary for a successful outcome. But it can also be fertile ground for such a takeover. So, how do you prevent it from happening?

The key is in setting clear guidelines. For example, defining goals for a particular item and asking for feedback based on those parameters.

Consider the hero area of a home page. Let’s say you’ve built something beautiful and need client approval. You might approach them by saying something like:

“I’ve set up the hero area, please take a look! Here is what we were hoping to achieve:

• Introduce branding elements, including the logo, colors and fonts;
• Encourage users to subscribe to the mailing list;
• Mention the 20% off discount for new subscribers;
• Keep the entire area accessible, easy-to-read and concise;

What do you think?”

The example above isn’t all-encompassing. But it puts the stated goals into a client’s mind. This helps you to narrow the scope of their feedback and (hopefully) avoid anything that distracts from the desired outcome.

Put UX Back Into the Hands of Experts

Don’t get me wrong – clients should absolutely be involved in the design process. It’s their brand, after all. And things usually turn out best with their input.

But the heavy lifting of UX should be done by experts like you. Your job is to turn a client’s vision into something that is highly usable. It’s about establishing a brand while helping users get to where they want to go.

If all goes well, they’ll take the path to conversion – whether that means sales, contact, or a subscription. That’s simply too important to leave to client whims.

Instead, educate and work with your clients in an effort to drive home UX best practices. Provide them with parameters to work within. The result will be a website that benefits its owner and users alike.

The post How to Stop Design Clients Making Too Many UX Decisions appeared first on Speckyboy Design Magazine.

You can’t always see it, but you’ll feel the difference when using an interface with optimized UX. Whether you’re creating an e-commerce app to run on multiple devices or developing a new cloud-based platform, a well-designed UX can ultimately set your product apart from the competition.

Why UX Matters More Today Than Ever Before

In the current era, most people interact with some form of technology on a daily basis. From using a smart TV to access the latest weather report to accessing work applications on a smartphone, technology is more hands-on, valuable, and user-friendly than ever before.

For technological advancements to continue to take root in society, hardware and software professionals must focus on creating a seamless experience. Devices, websites, and applications that are too difficult to use or learn fall to the wayside in favor of solutions that intuitively make more sense.

While UX is a fairly new field, some professionals have been working on optimizing end-user experiences for 10 to 15 years.

Today, every business with a digital presence has a stake in successful UX. On the business side, UX drives market visibility, adoption rates, and customer satisfaction. Content producers, coders, graphic designers, web designers, information architects, and SEO strategists all play a role in creating a positive user experience.

Dissect the Main Elements of Strong UX

The user experience is something that, if done well, end-users will never notice. When web pages, applications, and devices are designed with UX in mind, a user can focus on the purpose of the product – typically a message or interaction.

Many UX professionals take an outcomes-first approach to UX. Instead of looking at core components, create a list of the user-outcomes a development team wants to achieve. These typically include:

• Functionality: A positive UX is both learnable and forgiving for users from all backgrounds. For an eCommerce site, for instance, a user expects to intuitively access product information, graphics, video (if applicable), user reviews, and a streamlined checkout experience. This component requires UX teams to focus on navigational cues/hierarchy, forgiving formats, and responsive design.
• Value: Every piece of digital content should provide value. In the eCommerce example, value might translate to a rewards program and/or the easily accessible information a consumer needs to make a purchasing decision. This component typically connects with content, content layouts, and information architecture.
• Satisfaction: When humans interact with technology, the interaction can elicit an emotional response. You never want the response to be frustration, anger, or confusion. UX means creating an interaction that leaves a user feeling content, satisfied, or even happy. To create satisfaction, UX professionals work closely with UI professionals to create micro-impressions and use psychologically rewarding colors, graphics, and interactions.

You may see these basic components in many different forms, but these three items span every discussion of core UX criteria. In the image below, UX is described as “look, feel, and usability.”; Other terms you may see to describe the same essentials include adaptability, efficiency, desirability, and user-friendliness.

Image Source

UX in Practice

Compare the Uber interface with a local cab company. Within a few moments on the website, any average user can identify the UX-optimized site. You can probably identify which is more user-friendly just by looking at the screenshot. Uber’s mobile app and desktop site feature simple, actionable cues, comforting colors, and responsive interfaces.

The typical cab company, on the other hand, has a busy-looking site with so many different navigational cues that a user might forego the digital cab-hailing experience altogether.

In the case of the cab industry, the effects of poor digital UX have had repercussions on businesses. In LA, taxi travel has dropped 20% since rideshare apps came to the marketplace. People of all ages prefer the user-friendly, straightforward, and transparent process of booking a rideshare car.

Your Checklist for Successful UX

UX is an area of design that is constantly in motion. Once you optimize one area of a site or application, it’s time to revisit another. Keeping the three essential outcomes in mind, here are some guidelines that UX professionals need to remember to create a seamless and compelling digital experience for end-users:

1. Speed is Important: Speed issues associated with remote geographical locations are acceptable. Speed issues associated with poor design choices are not. Optimize each component to ensure fast transition times for apps and websites.
2. Remember that UX Extends to all Digital Products: If you have a website, an app, and/or a software product, give each of them a familiar look and feel. A user should know they are using your brand’s product. Navigational cues, layouts, core colors, and workflows should follow the same patterns.
3. Create Layouts that Direct Users: A user-friendly format should direct the user’s line of sight as well as their actions. Instead of focusing on the number of clicks a user has to make, think about creating clarity during the process. Each task flow should feel simple and confirm a user’s actions.
4. Incorporate Multiple Fail-Safes: Have you ever clicked on something before you were ready to submit it? Give users an opportunity to undo, modify, or save input.
5. Focus on Micro-UX: Small interactions can make a major impact for an end-user. Asking for readers to engage in a poll, incorporating gamification tactics, and giving users progressive tips can all engage the user and add value to the experience. However, use caution when adding micro-UX features to a product. Too many additions and/or unintuitive additions can quickly backfire.
6. Use Data to Inform Changes: UX professionals must focus on the user-outcomes as well as the technical aspects of a process. Validate design choices with strong consumer Leveraging User Data for Improved UXdata-backed KPIs that go beyond a traffic count. Look for individual feedback as well as metrics on the number of time users spend on the page and where they go as they navigate.
7. Work Closely with Other Team Members: UX professionals need to know what content creators, UI designers, and other team members are doing to create a seamless experience. Focus on collaboration between departments that have a stake in the digital experience to maximize a product’s potential.
8. Remember the Business Side of the Project: In the real world, UX team members aren’t solely focused on product development. Think about how every design choice impacts a brand’s budget, reputation, and schedule. Develop strategies that consider tech decisions and business outcomes.
9. Engage in Ongoing UX Educational Opportunities: Like many other tech fields, UX is constantly evolving. The prescribed methodologies of today may not work for the user experiences of tomorrow. Use online courses, forward-looking seminars, and trade publications to maintain current knowledge of UX trends and philosophies.

UX is an art and a science. Creating a phenomenal user experience requires knowing the tech, the user, and your team. Keep the essential components in mind, and then focus on the technology and design trends that fit your company’s brand personality.

As long as you’re thinking about the end result and the individual steps it takes to get there, you’re on the right track.

The post A Primer on the Essential Elements of Successful UX appeared first on Speckyboy Design Magazine.

While this is a worthwhile endeavor, there are other screens to think about. Large viewports are also a pretty important consideration. It’s rare to find new desktop or laptop devices with screen resolutions below 1080p (1920 x 1080). And both 4k (3840 × 2160) and 8k (7680 x 4320) monitors provide even more screen real estate.

Taking advantage of large screens can be a challenge. The key is in creating a layout that is both usable and legible. In addition, care must be taken to avoid overwhelming users by placing too much in front of them.

If you’re looking to build a website that takes advantage of large screens, we’ve put together some general rules of thumb. They may not fit every situation but will provide you with some factors to mull over before you go big.

Scale Text and Parent Containers Accordingly

Full-width text on a 1080p or 4k screen is a big no-no. It takes too much effort to read and keep track of where you are within a passage. The more text you have, the more difficult it will be for users to digest.

Therefore, text works better when it’s within a limited-width container. Consider an ideal width to be no more than 900-1200 pixels. Whitespace is also important as it allows for some breathing room. Experiment with various container sizes, margins and padding to find what works best with your layout.

Font sizing is also a key factor when designing for large screens. Increasing the font size helps text to stand out and also limits the number of characters displayed on a given line.

Finally, consider increasing the CSS line-height property for adequate vertical spacing between lines. This improves legibility and adds some openness to the overall design.

The Atlantic limits article text to a narrow, easy-to-read container.

Take Advantage of Multi-Column Layouts

One of the big advantages of utilizing extra screen real estate is that it provides plenty of room for multi-column layouts. Perhaps that’s why this technique is often seen on news-oriented websites.

With a traditional 1,000-pixel grid and a layout consisting of three or more columns, the content within tends to get squeezed. A page width of, say, 1,800 pixels allows columns to be spaced with substantial margins. And there’s still room to add internal column padding while bumping the font size up as well.

A wider page can also enable the use of some advanced column configurations. For example, think of a “Latest News” area that takes up the left half of the page – complete with a featured image. Then, two 25% width columns show other text-based headlines to the right.

This may be the perfect type of layout for large screens. It avoids wasted space while potentially making it easier for users to identify content that interests them.

Even better is that a combination of CSS Grid and media queries allow you to cater to the biggest screen resolutions while gracefully adapting to smaller ones.

The multi-column home page of The Washington Post.

Keep Important Items within Reach

Among the potential pitfalls of a super-wide layout is that some key items may require the user’s cursor to travel quite a long distance. At the very least, it’s an inconvenience and poor UX. At worst, it might be considered a pretty big accessibility issue.

However, these concerns can be addressed through design. A top navigation bar can be horizontally centered on the screen so that it doesn’t require a ton of mouse movement. Making it keyboard-friendly can ensure it’s accessible for those who don’t use a pointing device.

The extra width also means that other important pieces could easily get lost in a forest full of content. Elements such as login forms and calls-to-action need to be placed in highly-visible areas.

Integrating them into the site’s header or a static sidebar are possible solutions. A “sticky” header may also provide a path for keeping the most important items consistently within reach.

There’s plenty of room for creativity. But the main idea is making sure that users don’t have to constantly traverse the width of their screen to get to where they want to go.

WNYC Radio utilizes a brightly-colored static sidebar to keep their website navigation in view.

Use Predictable Design Patterns

Taking all of the above into consideration, the overarching theme is in creating a predictable design pattern. This means that the website’s layout allows content to flow in an intuitive manner. While certain items can be designed to draw attention, they shouldn’t detract from the overall user experience.

How does this work in practice? One example is the aforementioned multi-column layout. There may be several sections on a page that utilize columns, each with their own unique number and positioning. That’s fine, so long as there are consistencies in spacing, typography and related styles.

On a news-oriented website, this might mean that the “Technology” and “Editorial” sections have different column layouts. The “Latest News” section could even utilize a different background color. If they are consistent in look, however, it helps to create a flow while also avoiding a monotonous browsing experience. Each section stands out, yet blends into the overall design.

As with any design project, a lot of planning and experimentation is needed when designing with large screens in mind.

LG utilizes an alternating pattern of column layouts on their home page.

Make Effective Use of Those Extra Pixels

The beauty of large, high-resolution screens is that they can be used to create an immersive experience. We see it all the time with games, movies and other media.

Accomplishing this with a website is a bit more of a challenge, though. It’s especially difficult with a text-heavy site. There are some definite risks when it comes to usability.

Still, a well-crafted layout can effectively take advantage of the extra screen real estate. It’s a matter of ensuring easy navigation, legibility and consistency in design.

However, these are the principles that web designers practice each and every day. Keep them in mind and you’ll create a website that looks pixel-perfect on everything from a handheld phone to a massive 8k monitor.

The post The Challenge of Designing Websites for Large Screens appeared first on Speckyboy Design Magazine.

Sometimes these elements can be afterthoughts. Or put into place for marketing or analytical purposes. But they will drive users both crazy and away from your website.

Overdramatic? Maybe. But it’s a stark reality. Regardless of how brilliant your design and content may be, a bad UX sticks with users. And unless they have a compelling reason to come back, they probably won’t. You can’t blame them. Who needs the bother?

Let’s take a moment to outline some of these annoying practices. Sadly, they’re prevalent across the web. But that doesn’t mean we have to partake in them.

Modal Windows That Change Your Scroll Position

Modals are everywhere. It seems like everyone is vying for our attention by putting pop-up windows in our faces.

The practice has become so commonplace that it’s easy to ignore. Users can simply click and rid themselves of the interruption. No harm done.

But there is one implementation that is harder to justify. And it may not even be intentional.

Imagine visiting a page and beginning to scroll down. Everything’s going great until a modal window appears – and resets your scroll position to the top of the screen.

This puts users right back where they started. And not everyone will have the patience to restart their journey.

Whether this effect is due to buggy JavaScript or by design, it’s not ideal for UX. Regardless, it’s worth testing modal features to ensure that they’re as minimally invasive as possible.

Requiring Extra Clicks To See Full Content

For news-oriented websites, it’s standard practice to display an index of articles. A user can find an item of interest and click to access it. Content management systems (CMS) like WordPress make this easy to implement.

And that’s usually the end of the process. Users can view the chosen content and decide what comes next. Except it doesn’t work that way on every site.

Some websites have added an extra step. You’ll only get a partial view of the content – maybe a paragraph or two. At some point along the way, you’ll be asked to click a button to reveal the rest of the article.

If the content is behind a paywall and requires a login, that’s an understandable step. But otherwise, it’s preventing users from accessing the very item they wanted to see.

Whatever the benefits of this strategy, happy users are not among them. Users should not have to click twice to view content.

Third-party Features That Slow Page Load

Modern websites are capable of loading content and functionality from third-party sources. Connecting to social media APIs, for example, is a widespread practice. The same can be said for analytics, remotely-hosted fonts, and various software-as-a-service (SaSS) providers.

These features can be problematic, however. First, there are potential privacy issues. Users are becoming more aware of what they share and who they share it with. Some may be turned off by the idea of allowing Facebook, etc. to track their movements.

Page load times are also a concern. Even if your web host performs well, pages can still be slowed to a crawl by these third parties. They may prevent users from navigating your website.

Thankfully there are ways around this issue. Fonts can be stored locally. And some plugins cache social media feeds for faster loading. Locally-hosted analytical apps are also available.

Implementing features from third parties is fine. But it should be done in a way that minimizes the inconvenience to users.

Multimedia That Scrolls With the User

Video presentations are often placed at the top of a page. This makes it easy for users to find and watch. But if they scroll past the video, what does that say about their intent?

Far too often, these videos are configured to travel along with the user. As a user scrolls, the video shrinks and tucks into a corner. In some cases, it completely disregards user intent and is set to automatically play.

This is particularly frustrating for those hoping to read the associated content. Having moving images in the field of view, even if they’re off to the side, can be a distraction.

And mobile users are in worse shape. The unwanted video takes precious screen real estate away. This makes it more difficult to focus and read.

Is Your Website Frustrating Users?

When it comes to poor UX, the items above merely scratch the surface. But they’re prime examples of well-intentioned features gone wrong.

There are often legitimate reasons to put them into place. And the occasional feature may end up being more annoying than you realize. Still, it’s worth weighing the benefits and drawbacks.

Anything that gets in the way of a user’s ability to access your content is a risk. Push them too far and you may end up missing out on conversions. And who can afford that?

Conducting UX testing is a great way to catch these annoyances before they cost you. But it’s not necessarily within every budget.

In that case, take a closer look at how your website works. If you find items that aren’t user-friendly, take action to improve them. It may be the difference between a loyal customer and one that got away.

The post Those Little Things That Hamper the User Experience appeared first on Speckyboy Design Magazine.

For some companies, goals might revolve around clicks to boost ad revenue. Whatever the purpose of a website, knowing how to track and optimize conversion rates is crucial for creating effective marketing strategies.

Why Conversion Rates Matter

The website conversion rate is a useful metric to track the success (or failure) of a website’s intended purpose to better predict expected outcomes of planned marketing strategies. Using conversion rate data collected over a specified time can help business managers measure the return on investment from marketing strategies. In this same way, conversion rates can help with the management of user-interface design.

Much like a science experiment, you can change marketing elements separately and watch how they affect the conversion rate to home in on the most effective marketing approach.

For example, you could run an advertising campaign and leave the website design completely alone to see what effect the campaign has on the conversion rate. Then, make a few changes to the site design halfway through the campaign to see if conversion rates change. All of these conversion rate analyses can help you make better marketing decisions moving forward.

The Psychology of Website Users

To understand how to best design a site for high conversion rates, you must first understand how the mind of a visitor works. Humans, though unique and complex, tend to operate in similar ways when it comes to web behavior. Some fundamental psychological principles can help you better predict website user response.

1. The Law of Pithiness

Essentially, the Law of Pithiness states that people favor concisely communicated, well-organized items over excessively complex plans. When it comes to web design, users want to find the information they need as easily and quickly as possible. It may be tempting to create a wacky, out-of-the-box design, but if users cannot figure it out, the design will likely push them away.

2. Hick’s Law

Hick’s Law is the idea that increased choices lead to increased decision time. This is also referred to as the paradox of choice.

Though giving site users more options might seem like an ideal marketing tactic, it can hinder their ability to make a decision, and they may end up leaving before taking a desired action.

Minimalistic designs eliminate the tendency to overthink, thus guiding visitors to desired actions.

3. Fitt’s Law

A target’s size and distance from the user’s current position determines the time required to reach it.

This is the basic idea of Fitt’s Law. In terms of web design and conversion rates, this law can be used to establish the ideal size of a clickable area.

4. Rule of Thirds and the Golden Ratio

People tend to prefer aesthetically pleasing site layouts. The rule of thirds is a photography composition principle that involves the way eyes tend to scan a page. Designs should be broken up into horizontal and vertical thirds, creating a nine-square grid. When the subject of a picture is placed on an intersection of horizontal and vertical lines, it is said to be more visually pleasing.

Similarly, the golden ratio utilizes naturally occurring patterns to create a visually pleasing design. The optimal 0.618 ratio of height to width creates a spiral that draws the eye in to focus on the subject. Designers can use both the rule of thirds and the golden ratio to determine the appropriate placement of important page elements such as call-to-action buttons.

Web Design Elements to Boost Conversion Rates

Site design is a major factor of conversion potential. There are many common mistakes companies make that kill their conversions. Using the psychological principles above, web designers can make simple changes that can increase user-friendliness to encourage more conversions.

Clean and Attractive Landing Page

The landing page is usually the first impression a website makes on a visitor. If the design is too chaotic or confusing, the user will likely leave before spending more time on the site.

Simplicity is key when it comes to designing an effective landing page. Give only the essential information and do not create too many distractions.

Logical Site Map

When navigating a website, users want to know where to look, even if they’ve never visited the site before. It can be tempting to show off your creative thinking skills by throwing users a curveball, but most sitemaps are similar for a reason.

Intuitive page categorization leads to user-friendliness, which helps increase engagement. Stick with the principles outlined in the law of pithiness – don’t stray too far from standard site organization.

Site Map by Zarin Ficklin

Useful and Relatable Content

People are drawn in by what speaks to them personally. If they are searching for specific information, they probably won’t stay on a site that has content filled with fluff and self-promotion.

If they are looking into purchasing a product, they will look for reasons to trust the company selling it. The written content on your site must be compelling and well researched to draw in readers and build trustworthiness.

Effective Call to Action

Call-to-action buttons hold great conversion rate potential, but if they are designed poorly, they may simply be ignored. Gain the user’s interest with specific, intriguing copy that shows the value of clicking on a link.

The button should be large enough to be seen and have bright colors and bold, readable text. Place it in a prime spot on the page to ensure it will not be missed. In some cases, you may want to put it in more than one place.

Simple Forms

Following the law of pithiness, keeping forms simple can decrease user frustration and increase the likelihood of form completion.

Ask only for essential information and use a clean, organized form interface. Studies show that conversion rates increase significantly when the number of form fields is reduced.

Booking Form by Wen Tong.

Responsive Web Design

With more and more website users browsing the web on smartphones and tablets, incorporating responsive web design is becoming imperative. Responsive web design allows a site’s formatting to adjust to browser windows of different sizes.

Menus that stretch across the top of a screen in desktop view may be condensed to accommodate for smaller mobile devices. Columns can adapt according to screen size by stacking, so only vertical scrolling is needed to search a page. Google favors responsive sites as well. If your website is not designed to accommodate different user interfaces, you could be missing out on thousands of potential visitors.

Load Time

People are becoming increasingly impatient. With the whole world at their fingertips, they usually do not want to wait around for a site to load to get the information they need. A poor site loading time could also decrease the chances of a user completing an eCommerce purchase.

Users may also associate poor loading times with a non-secure server and worry that their payment information will not be safe. Make sure to optimize file sizes for your site and ensure that your server is up to date to avoid losing conversions.

Familiarizing yourself with conversion rates and utilizing conversion metrics is a great way to improve your marketing strategies and track progress. Keep fundamental psychological principles in mind when working on a site design to make engaging, easy-to-navigate pages.

Stay on top of advancements in website technology to ensure your site’s responsiveness and load times are optimal. If needed, reach out to a digital marketing agency to help you optimize your site conversions.

The post A Comprehensive Guide on the “Whys” of Site Optimization appeared first on Speckyboy Design Magazine.

Try and think of twelve items of any description, write them down so you can check them out later, and then stop thinking about them. Do whatever you want: hang the laundry, do the dishes, do anything, but let time fly over you (but not by much) and then come back, sit down, take a deep breath and try to recall the twelve items that you wrote.

If you remembered more than half (give or take two), then you have a way above average short-term memory (The Magical Number Seven, Plus or Minus Two, George A. Miller, 1956). Truth be told, the limits of our consciousness are there for all to see, hidden in plain sight. We just need to pay attention to actually notice them.

How can we, then, function in a society that demands so much from us? A society that demands attention spans longer than 12 seconds, multi-tasking skills on par with an octopus on Ritalin, and the amazing ability to sit on a chair (for those lucky few) doing God knows what four hours at a time? The answer is simple: we don’t need to.

Our brain, in its infinite wisdom, decided to carry that load for us. It decided to let us handle only what we could instead of what we should, running on autopilot most of the time, leaving the low-level tasks to automated scripts and the rest, a hyper-condensed blurb version of reality, to us.

How can we design for such a brain? How can we attempt to see that which is never shown? How can we crack the black box without crashing the plane? The answer is simple as well: we don’t need to.

We design, instead, for the painfully limited, but infinitely more understandable, conscious self so that we can reach behind it.

We turn those human limitations into design limitations, giving birth to minimal design, which instinctively strives to appeal to our conscious (and unconscious) instincts and perceptive models by removing anything that needs some form of high-level cognitive functions, leaving only immediate, straight, instinctive, and direct comprehension because, truth be told, our eyes want it simple and clean.

The Conscious Automaton

A famous 2007 experiment, conducted by John Dylan Haynes, a neuroscientist at the Bernstein Center for Computational Neuroscience in Berlin, and he wanted to register the exact moment in which a person takes a decision, and the amount of time it takes for that decision to be executed.

What they found, however, was way more confusing and even more challenging.

It seems that even though the conscious decision to push the button which the patients were asked to push at will was registered a second before the actual activity took place, patterns of brain activity registered as much as seven seconds before the conscious decision-making process were able to predict the eventual end result of said decision.

“The first thought we had was ‘we have to check if this is real’,” says Haynes. “We came up with more sanity checks than I’ve ever seen in any other study before.” But the results were there.

Now, disregarding all the ethical and philosophical implications of the experiments, which are plenty, this showcases the real limitations of our conscious will and underlines the fact that our brain does more things behind our backs than previously thought.

Who knows what else is being automated, what arcane and long-forgotten algorithms lay dormant, locked deep inside our mammal brains?

What’s important, though, is that these processes happen without the bare minimum of conscious input and, therefore, without our control which means we can identify those subconscious processes, those deep structures, and guide them gently toward our own ends.

We can design for robots. Fleshy, squishy, pink, and soft, but, to a certain degree, robots still.

Memory, Attention and the Gestalt.

It’s not easy designing for robots. The process requires an intimate understanding of the way in which their perception work. It requires deep research into the way in which it recognizes and stores data and more.

Fortunately, such research has been done, though much more is still undiscovered.

Prägnanz Law – What do you see, several unconnected circular shapes and straight lines or… [Image Source]

Among the many studies and theories on the subject, there are a few key players. One of them was the Gestalt school of psychology, which was a group of theories and experimental studies conducted in Germany by several influential scientists at the beginning of the 20th century.

They came to the conclusion that shapes and perception are two correlated phenomena, that human perception found shapes where there were none and that we were conditioned to find them because the shapes, themselves, appeared everywhere.

Sounds confusing, right? It will become clearer once you understand the concept of “Prägnanz,” or “pithiness,” which is what determines which shapes prevail.

Imagine, for example, a series of dots arranged randomly. They can be interpreted in many ways: as irregular shapes, as a geometrical set, or as isolated blobs, among many others, but the one that prevails, statistically speaking, is the geometric interpretation.

That means that we are predisposed to find geometrical shapes everywhere.

What the gestalt experiments concluded was that, among the many possibilities, we tend to perceive reality in terms of the simplest, most stable, symmetrical shapes and that it’s precisely because those shapes exhibit the aforementioned characteristics that we find them everywhere.

They are pregnant shapes, we can’t escape their ubiquity, and they impregnate our cognition.

It takes virtually no effort to recognize and recall them, and they are the first thing we notice. Now, remember which design principle stresses the importance of basic, geometrical shapes? Those are “pithy” shapes. They possess simplicity and stability.

I wonder, which design style could that be? [Image Source]

Another important piece of scientific evidence, The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information by George A. Miller, which has been mentioned before, ponders the limits of our ability to make a judgment faced with multiple variables and our short-term memory’s capacity to remember things with 100% accuracy.

Miller came to the conclusion, by cross-referencing many studies, that the sweet spot to be able to recall a list of different items accurately was that of 7 items, or chunks as he called them, which he defined as the smallest unit of memory a person can remember.

That number has been fiercely debated, but still, it never rises higher than 12, for the most part, which is relatively small as well.

Now, remember which design principle stresses the importance of having as few design elements as possible? It’s because we have a small short-term memory.

In 1999 two scientists, Simon Chabris of Harvard University and Daniel Simmons of the University of Illinois at Urbana-Champaign conducted an experiment on inattentional blindness, which is the name of the cognitive phenomenon in which unexpected or excessive stimuli is gone completely unnoticed by the conscious mind.

The experiment asked a series of participants to watch carefully a movie in which a series of basketball players passed a ball between them and counted the number of passes.

While they were doing that, a man dressed as a gorilla walked into the middle of the scene, banged his chest, and then went away.

The subjects often failed to notice said man. Remember which design principle stated to use the fewer hierarchies and the least amount of stimuli possible? It’s because we are naturally predisposed to ignore stimulus among a certain threshold.

Tailored To Our Limitations

It’s time to face the possibility that minimal design is just suited to our cognition in such a way that, if we desire immediate, absolute, and unambiguous communication, it may as well be our best choice.

That’s why it proved so successful when it was born in the 20th century. That’s why it’s still successful. But, as with the very same cognitive model it’s made to appeal to, it may also be really limited.

Because it works immediately, because it’s direct, straight, and instantaneous, it may also be dry. Because, in reality, simplicity and minimalism are only in the eye of the beholder.

Truth be told, we see simple shapes because our brain arranges reality in that way, but the truth is that a solid shape drawn on a piece of paper, a screen, or a wall is, in fact, a texture with many micro-shapes interlocked in unusual ways.

The fine mineral grain of the brick, the thin fibers of the paper’s surface, and the myriad bright lights that compose the micro-structure of a screen’s image are all shapes in and of themselves, and often reality itself escapes the restrictive cage of the gestalt shape, and a great deal of communication is done on the rational, conscious level.

Scientific languages cannot be intuitively understood. Complex philosophical theories cannot be communicated using minimal design. Minimal design communicates minimal ideas as well, and often, that’s not enough.

The Novice Brain and the Expert Brain

When someone knows a lot about something, enough to be considered an expert, there brain functions regarding that subject are fundamentally different than the brain functions of a layperson.

They have many more automated processes regarding the low-level stuff of their area of expertise, their ability to recall information and process it on a conscious level is significantly higher than that of the layperson, and any information regarding there area of expertise is bound to enter through conscious channels.

They tend to put a lot of attention into their area of knowledge, so they are willing to take the time to fully comprehend something as long as it interests them. Therefore immediate, simple and instinctual communication is not enough.

Minimal ideas are not enough for them. They understand on an instinctive level that it’s not just shapes out there, that there are textures, and they can move between the micro-shapes feeling at home.

That’s why, for example, complex software UIs designed for experts (like most 3d modeling software) are impenetrable for the novice and the uninterested. It may be as simple as possible, but that certainly is not enough and not even near minimal standards.

In contrast, the novice expert is not going to dissect each and every proposition regarding a subject. They will suffer a bad case of intentional blindness induced by an excess of stimuli and only get a general idea.

And that general idea will go through channels unsuited for that kind of information. Somewhat unfamiliar with advanced physics usually needs analogies to be able to understand.

That’s why minimalism is perfectly suited for the novice brain because it doesn’t assume anything because it doesn’t challenge. An excerpt from The Real Leadership Lessons of Steve Jobs by Walter Isaacson goes something like this:

“Jobs aimed for the simplicity that comes from conquering, rather than merely ignoring, complexity. Achieving this depth of simplicity, he realized, would produce a machine that felt as if it deferred to users in a friendly way, rather than challenging them.”

And in that way, minimal design aims for a design that looks friendly, because it hides nothing. Because all you see is all you get, because this transparency in form and function is refreshing for the person who desires nothing more than use that damn device to make a call or listen to music, instead of hacking the Pentagon.

That’s why flat UI design, or almost flat design, is so appealing.

That’s why it’s so effective; it appeals to the natural way in which we interact with things, with discreet elements, shapes, and a few of them, with few colors.

Learning in such an environment decreases inattentive blindness and increases the user’s ability to recall buttons, options, and functions by decreasing the net amount of options presented.

It took us several hundred years to be able to come up with a set of general principles for making tools, appliances, and communication accessible to everyone (though not suited for everyone) by identifying the core principles that guide our most basic cognitive processes and understanding their limitations.

Limitations that we often forget because designers are experts in communication and, well, we think images, interfaces, and appliances like experts do.

But we do not design for ourselves. While we might enjoy getting lost inside an ambiguous image, the average person does not and so must address their limitations.

We must strive to bypass them and reach a deeper, subconscious level in which communication becomes instantaneous, automated, and direct.

So reduce, decrease, flatten and subtract until it’s able to go through the small hole of the conscious mind, and you’ll have won.

The post A Scientific Perspective on Minimal Design appeared first on Speckyboy Design Magazine.

The more users enjoy your site, the more likely they are to stick around and become members, customers, subscribers, and so on. Improving your site’s search function can be accomplished with ease, but many may sabotage their search by making these common mistakes. Learn how to optimize on-site search and avoid the common pitfalls of your competition.

It Isn’t Visible

If users can’t easily identify your search form, they may grow frustrated and seek their answers elsewhere. Ideally, the location of your search bar should be easy to see from the above-scroll section of the page (i.e., not at the bottom). The closer to the top and left side you can bring your search box, the better.

While the search box shouldn’t be the first thing users see, it should be strategically placed so it falls within normal reading patterns.

Once you settle on a place, keep it as consistent as possible. As many as 30% of users will use your search function if they can find it, so maintaining the location consistently will yield quicker searches and return users.

It Isn’t Easy

Anything that places an obstacle between your user and completing their search detracts from its accessibility. If your search box has placeholder text, such as “question here” or “product name”, make sure that the text disappears when the user begins typing.

While users may not abandon the search altogether because of extra keystrokes, they’re still being delayed if their backspace key gets a workout. Eliminating even one extra key push can increase user satisfaction and make the search function more efficient.

Other ways to increase the accessibility of your search bar include cosmetic changes like color use and text readability. If your search bar uses custom colors at all, make sure they’re sharp and contrasting. Likewise, ensure that any custom fonts are legible in both size and shape.

Auto-Suggestions Aren’t Provided

Auto-suggestions can speed up the search process significantly for the user, especially if you offer multiple models or versions of a core product. The less time users must spend typing in their query, the longer they can spend engaging with the content they’re trying to find.

Autocomplete by Martin Bonov

No Autocorrect, Either

Perhaps one of the most crippling oversights in a search function is not providing autocorrection. If your search can detect the more common typographical errors in search queries, let it apply the corrections automatically.

The more a user has to retype their query, especially on mobile, the more likely it is that they’ll give up and find their answers from another website.

Whenever possible, you want to provide as few empty result pages as you can, and autocorrection can go a long way toward limiting them. Remember, the goal is always to make the trip between search and acquisition as effortless and short as possible.

The 404 Isn’t Helpful

Despite using autosuggestion and autocorrect to guide user searches, there will inevitably be a need to display an empty results page. Try to make this page as useful and beneficial for your user as possible.

Provide links to main directories, offer suggestions for reworking the search query, or direct them to your contact page. Whatever you do, be sure to give the user something for their trouble of searching, even if it can’t be the results they want.

Results Aren’t Straightforward

Search result pages should be as familiar and dressed down as possible. Save the more novel filters that your search engine can provide for the second step in the search process, not the first.

Hide the bells and whistles of your engine under an advanced search link and, if possible, have the search menu expand without leaving the page. Make sure that the search results landing page is easy to read on first pass, providing legible, plain fonts, and clean composition so that results can be assessed individually.

Advanced Search by CodyHouse

They Don’t Separate Filters and Sorting Methods

Sorting methods are a different beast from advanced filters and users will want access without having to perform additional work. Make sure that your sorting options (date, popularity, and so on) can be accessed from the same page.

To increase visibility, place the options on the top left corner at the start of the search results.

They Ignore Search Analytics

Your search analytics can be a powerful tool for marketing and UX. It can also reveal weaknesses in your search optimization. Monitor your search results on a frequent basis and establish metrics to use for comparison. When you utilize your search analytics, you can address any search weaknesses by going directly to the cause.

If you notice that out of 15,000 search queries for “monkeys”, for instance, there are only 3,000 clicks, you would be able to recreate the experience and determine if it’s a poorly optimized keyword, irrelevant data, or both.

No Search Variations

Adding variation search results can help your user find products they may not have considered before. If a user types “oversized sweater”, then you can provide them with alternative search query options and results (such as “oversized” and “sweater”) in separate sections.

That way, even if you don’t have the product or information they’re looking for, they’re able to view your closest equivalent. Providing something close, even if not exactly what they searched, is more beneficial than an empty results page.

Irrelevant Results

While the more results you can offer, the better, keep in mind that your results need to be relevant. If there’s no reason to link variations based on past behavior and the two entries don’t share common ground, don’t link it for the sake of avoiding an empty results page.

They Overwhelm Users

And finally, one of the biggest detractors from search UX is overwhelming the user with information. If there are over twenty entries that meet a user’s search query, don’t display them all unless the user has specifically chosen that option.

Instead, set the default display between 15-20 and allow users to tab between pages to view the rest of the results.

The post How to Fix Common On-Site Search Mistakes appeared first on Speckyboy Design Magazine.