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.

The best part? All of these books are completely free to download! We’ve curated this collection of our favorite free eBooks for your convenience.

Whether you’re interested in CSS, HTML, JavaScript, PHP, WordPress, Git, UX, or any other web-related topic, you’ll find something that piques your interest. These eBooks come in various formats, including HTML, PDF, and even ePub, so you can choose the one that suits you best.

General Web Design eBooks

Web Typography eBooks

Web Performance eBooks

Web Accessibility eBooks

CSS & HTML eBooks

JavaScript & PHP eBooks

WordPress eBooks

Git eBooks

User Experience eBooks

General Design eBooks

The post 50+ Free eBooks for Web Designers & Developers appeared first on Speckyboy Design Magazine.

While many methods exist for creating a sitemap, we’re not focusing on that today. Instead, we’re exploring sitemaps that have been thoughtfully designed with beautiful aesthetics in mind. These sitemaps are not only functional, but they are visually appealing and showcase the importance of design in all aspects of web development.

So whether you’re looking for inspiration or just appreciate a beautifully crafted design, these examples of carefully designed sitemaps are sure to impress.

Mobile App Userflow

Designed by Hale Koksal

UX Workflow – Wireframe & Sitemap Creator

Fireart Studio Mobile Flowchart

Designed by Den Klenkov

UX Workflow Document Templates

Newscred Sitemap

Designed by Ed Moss

Skeleton Wireframing Kit

Yash Technology Sitemap

Designed by Aditya Ranade

Job Seeker User Flow

Designed by Sonali Banerji

Focus Lab User Flow

Designed by Bill Kenney

Cosmic User Flow

Designed by Eric Ressler

Sitemap For Student Guide

Designed by Janna Hagan

Crown & Mane Simplified Checkout Process

Designed by Michael Pons

Web App Information Architecture

Designed by Carine Teyrouz

Site Flow

Designed by Angie Herrera

Scase Userflow UX

Designed by Adam Kalin

Mobile Lo-Fi UX Wireframes

Designed by Michal Kulesza

User Flow

Designed by Mackenzie Child

IntelliMap Sitemap

Designed by John Menard

Website Flowchart

Designed by Eric Miller

Website Flowcharts Stencil

Designed by Eric Miller

Sitemap / Flowchart for the Web

Designed by Jane Zhu

Crown & Mane Application User Journey

Designed by Michael Pons

If you’re looking for wireframe templates, take a look at this article.

More Web Design Inspiration

The post 25 Beautifully Designed Sitemaps & User Flow Maps for Inspiration 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.

If you’re a web design client, or are looking to build your own website (tread carefully!), don’t lose too much sleep; there are a few key areas you should primarily focus on, and endeavour to fully know about and understand. We have listed them below.

Stay True to Your Brand

Trends will come and go. Web design elements change significantly over the course of a year, but your brand won’t. That’s what makes your company unique. If a trend doesn’t match your company’s personality, jumping on the bandwagon may not be right for you.

Focus on changes that complement your mission and your goals as an organization. This help you find meaningful updates, and Google will reward your adjustments.

Invest in Responsive Design

People will move to using more and more different devices as time goes on. If your website cannot accommodate those visitors in a seamless and streamlined fashion, you could lose out on a large portion of your customer base. Focus on developing a website that will accommodate any screen. Responsive design is a must.

Invest in Reliable Hosting

As designs change, there are a few aspects of websites that remain the same. Without a reliable host, you could face timing issues and be unable to fully use your platform. A good host will provide regular backups, automatic upgrades, and offer scalability. When you search for a host, look for a company with a strong track record.

Don’t skimp on hosting.

Focus on Simplicity

Simplicity goes beyond the clean look of your website and the user experience. Make sure your site can adapt to the ebb and flow of trends. You should easily be able to change design aspects, content, and other aspects of a page from your office without the help of a developer. Look for a website development company that offers the tools you’ll need (i.e., a comprehensive content management system) to customize your site in the future.

[Image Source]

Invest in a Visionary Website Team

Whether you have a website team in-house, or you rely on an agency, partner with a team that understands your business’s long-term goals. Websites generally have a lifespan of 2-4 years, which means you’ll need to update or reinvent your online presence that often. If you choose a web team you trust to help you today and into the future, you can protect yourself from the inevitable slow decline.

Security is a Top Priority

Online security is an investment in your company’s and your website’s future. A security breach can jeopardize customer information, change your SEO outlook, and have other negative effects on your website strategy. Security plugins, system backups, and routine security checks can help you avoid a devastating security incident.

Never Forget the Links

Although this part isn’t fun, try to check links to make sure they all still work regularly. Links that don’t go anywhere or that are of poor quality won’t help consumers reading through blog content or elsewhere on your site. Similarly, link building for SEO improvement will backfire on you. Google is cracking down more and more on false link building strategies.

Focus on natural links that are relevant and from quality sources. You may want to consider investing in a backlink audit to get a clear picture of where your link building currently stands in your overall SEO strategy.

Stay Focused on Current SEO Practices

SEO changes constantly, and it should always be a long-term strategy for any business with an online presence. Take the time to understand which keywords your audience is searching for and remember the fundamental SEO principles that govern web site construction. Make sure you use unique headers, meta-descriptions, and other strong SEO-based strategies to successfully access the market.

Simplify Navigation

Site visitors aren’t interested in clicking through several pages of a site to find the information they need. Unfortunately, online attention spans may only get worse. Instead of developing an elaborate site architecture that might as well be a museum of antiquity, try to keep all pertinent information within three clicks of the main page.

Invest in Content

Online content has a short lifespan. What you post today may not be relevant or accessible in a few weeks. Recycle content by rewording it, expanding it, and changing titles, and constantly look for a fresh angle to present to your audience. Regular content updates are a viable SEO tactic that will continue to benefit your business into the future.

Get Social

Many people find websites by logging into their social media feeds. If your company’s content isn’t there, it won’t get noticed. Make sure your main website is always accessible when you post any content on social media, and use analytics to target consumers who regularly use the standard social media platforms and up-and-coming ones.

[Image Source]

Manage Your Online Reputation

Everyone with an online presence has an online reputation. With the viral nature of some content, all it may take is one negative post for your company to suffer serious damage.

Make sure you know what the internet is saying about your organization, and address any negative comments as quickly and as professionally as possible. Try to highlight positive interactions to minimize any negative ones. Your audience should trust what you say online.

Take Calculated Risks

Surviving and thriving on the internet are two different things. Even if you don’t touch your website for five years, you would have some level of presence online – but it may not help you meet your goals. It may be a stagnant, depreciating asset.

Make your website work for you by taking a calculated risk with your design or an interesting marketing campaign here or there. The more traffic you can drive to your site, the more information you can analyze for future changes. Taking calculated risks is an incredible way to secure your standing in the future.

Finished!

Your website is your company’s online representation. It may be your only opportunity to engage with an individual now and into the future. To secure your online presence, make sure you’re staying engaged with your audience, readership or customers. Keeping momentum moving forward with every aspect of your online strategy is the only way to stay relevant online. Adapt and evolve as necessary to see results. You don’t need to protect yourself from the future as much as you need to embrace it!

The good news is you can start learning and developing habits that will help you out later right now. Get involved with SEO, partner with the right professionals, and start developing regular content that adds value to your audience. All of these tips can only help your online efforts and secure your presence in the future.

And above all else, don’t forget to be a good web design client!

The post 10 Key Things Web Design Clients Should Know & Understand appeared first on Speckyboy Design Magazine.

De Stijl simply means “the style” in Dutch, and is also known as neoplasticism. The art movement started in the Netherlands in 1917 and has since made a worldwide impact on art, architecture, and design – or more specifically, digital design. The pioneer of the movement was Theo van Doesburg, who died in 1931. Other artists involved in the movement were Piet Mondrian, and architect Gerrit Reitveld.

De Stijl has affected modern web design in terms of favoring a simplified, minimalistic approach. This movement was launched partly as a reaction to the dramatic art deco style that was also popular during that time period.

The De Stijl movement was a proponent of extreme simplicity in design. Through these simple designs, supporters of the movement believed that it expressed the utopian ideal of harmony and order. The major principles that were promoted by De Stijl artists include:

• Simplified visual compositions to the vertical and horizontal directions.
• The use of only primary colors, together with black and white.

A great example of De Stijl principles still in use today is Google’s homage. Take a look at the clean design with the use of primary colors on a white background. This design by Google’s team would have made any of the De Stijl artists proud. Although minimal, it is powerful, easily recognizable, and universally appealing.

De Stijl emphasizes the importance of minimalism. Although it only actively existed as a thriving art style for a short time, it laid an important foundation for the minimalist movement that would occur later.

Simple, minimalistic designs have withstood the tests of time and are still a popular trend. While minimalism certainly isn’t an extravagant design technique, there is still a great amount of thought that goes into it. Placement, contrast, boldness, and cleanliness are more important and make much more profound statements in visual design than garish (and often unnecessary) details.

Minimalism applies to the arts, literature, and all forms of design. To think like a minimalist, ask yourself how much “fluff” you can take away from a design without having it lose its purpose. Good minimalist design only relies on the base essentials and creates interest through placement, movement, and contrast instead of extravagance.

Removing the excess and focusing on the barest essentials is what leads to more user-friendly websites and graphic designs. Minimalism in web design and development naturally leads to more intuitive and enjoyable user experiences.

The principles of both De Stijl and minimalism can teach us a lot about how to streamline our graphic designs and make them more visually appealing. Here are a few principles from De Stijl that are easy to incorporate into your graphic design:

Less is More

Visitors don’t want crowded web pages. When a new visitor sees a website, too much content can be overwhelming. They’re often left unsure of where to go and end up simply clicking off the page out of confusion and frustration. To avoid this fate, keep your design simple but meaningful. Make sure the important elements of your site are easily defined so that visitors aren’t left guessing.

Once again, Google’s homepage is a perfect example. The site is clean with just the Google logo and a search bar. Users coming to that page know exactly what to do, and the search engine quickly becomes their go-to search tool because it is so easy to use. Stripping down your website design helps users focus on what is really important, such as the products you are trying to sell. The more distracted they are by design, the less likely they will be to make a purchase.

Keep a Neutral Color Palette

The color palette you choose is another important part of your website design. Colors that are too loud can create unintended emotions in viewers, so it’s best to keep things neutral. If your logo already includes bright colors, keep the rest of the color scheme very simple.

Craigslist is a great example of a site that uses an extremely simply color scheme. Now, Craigslist probably isn’t the first site you would think of when looking for design examples, but it actually is a great example of minimalistic style at work. It only uses a few colors, mainly white, gray and blue. Users go to the site and immediately know right where to click because everything is laid out clearly in front of them. There’s no crazy color scheme or distracting fonts.

Make Content the King

There’s a common expression in marketing that “content is king.” This means that the focus of your website should always be on the content, not the design.

Content is also one of the most powerful tools you can use to drive awareness and engagement with your brand. Keep things clean and simple and really let your message to potential customers shine through. The design of a website should simply make it a vehicle to deliver information to the customer; the design shouldn’t be the star of the show.

Make Your Design Timeless

One of the benefits of minimalist designs is that they never seem to age. The De Stijl movement started more than 100 hundred years ago, yet we are still talking about how relevant it is today.

If you’re looking for a site design that won’t need to be updated every year, stick with a sleek, minimalist design. When brainstorming your design, steer clear of any trends or fads that could quickly fade. While these might appeal to customers right now, you will have to update your site constantly to keep up with the hot trends.

Make it Beautiful

When all is said and done, it’s you who will have to live with your website and work with it day in and day out. It’s important that you truly appreciate the website and think it’s beautiful.

If not, it’s time to go back to the drawing board. It’s certainly true that your website should exist to offer fantastic experiences to your customers, but if you don’t like the design yourself, it isn’t an honest reflection of you. Modern consumers are extremely discerning, and authenticity is valued. Remember this and it will help you stand out from your competitors.

Keep Everything Balanced

One of the trickiest elements of minimalism is making sure that everything on your page looks balanced. Take a look at your designs and make sure there isn’t too much going on in one area.

Before you start your next design project, keep the De Stijl principles discussed in this article in mind. This minimalist approach to design will help you create more user-friendly websites and better user experiences.

Remember that the simplicity of your design should be reflected in its mechanics. Make sure your users can easily navigate and use your site. Functionality should never give way to fashion, so make sure your site performs well and then tweak your design as necessary.

The post How a 100-Year-Old Dutch Movement Can Improve Your Site Design appeared first on Speckyboy Design Magazine.

It’s no surprise, given UX’s astronomical rise as a discipline, that there’s a ton of information out there about it. But how do you know where to look, and which sources are worth your time and attention? I recommend taking tips from the UX experts out there.

Whether you’re looking for inspiration on usable mobile UI design, user research and its application, or UX design trend tips, these 10 user experience experts should be the first stop on your journey to awesome UX.

Katie Dill

As Director of Experience Design at Airbnb, Katie Dill is at the vanguard of user experience. Katie and her UX team spend their days create engaging experiences for some 60 million users worldwide.

Which means that Katie has some stellar knowledge to share on building user journeys, conducting user research, and prototyping interfaces.

Follow Katie on Twitter, or watch out for her at tons of UX conferences and events throughout the year.

Jeff Veen

Jeff Veen is one of the heavyweights of product design and UX. The California native got his stripes as part of the founding team at Wired, before birthing Adaptive Path, one of the first UX consultancies.

He’s also the guy behind Google Analytics. In his current role of Design Partner at True Ventures, Jeff mentors an impressive portfolio of companies, from Medium to WordPress.

If you can’t catch one of Jeff’s presentations at UX and product events, you can listen to his podcast or follow him on Twitter.

Eric Reiss

On my Justinmind UX team, we’re are all big fans of Eric Reiss. The UX influencer has been working in UX since before the discipline officially existed.

From writing adventure games and penning some of the earliest books on information architecture, to his current role as CEO of UX agency FatDUX, there are few areas of UX that Eric doesn’t have experience of.

He brings a humorous, invigorating perspective to the discipline, and is worth while checking out on Twitter or in person.

Jared Spool

Everyone working in UX knows Jared Spool. He’s been at the coalface of usability since 1978, mainly as the Principal of User Interface Engineering, a web and mobile usability consultancy that happens to be the biggest user research organization worldwide.

Jared keynotes and chairs at the annual User Interface Conference, and blogs on usability/UX. Alternatively, his Twitter feed is full of updates, tips and stories from the frontline of usability.

Jen Romano Bergstrom

Jen Romano Bergstrom is UX Researcher at Facebook and Instagram, and as such as a hotline to the biggest user-base in the world. Eye-tracking is her special sauce: her latest book, Eye Tracking for User Experience Design (co-authored with Andrew Schall), goes deep into how eye tracking can help us understand and construct user experiences.

When she’s not researching users or writing books, Jen blogs and tweets about user research and usability.

Khoi Vinh

Khoi Vinh is one of the most fun UX bloggers out there right now – ask his 345,000+ Twitter followers if you don’t believe us. A former Design Director at the New York Times and then at Etsy, Khoi is now Principal Designer at Adobe.

He also wrote ‘Ordering Disorder: Grid Principles for Web Design’ and was tipped as one of the “fifty most influential designers in America,” according to Fast Company.

Khoi’s blog Subtraction covers design, tech and related culture – you can dig deep into posts on fantasy UIs, web fonts, the challenges of voice UIs and more. Everything comes with Khoi’s tongue-in-cheek spin on it, making it a great read for those dull office moments.

Willy Lai

He’s done UX in Apple, Intuit, Samsung, PayPal, and eBay, so it’s safe to say that Willy Lai has some serious Silicon Valley credentials.

Currently sharing his user experience knowledge through workshops, conferences, and career coaching, as well as mentoring at Stanford, Willy is an oracle on UX design and aligning UX with business goals.

Check out his Eventbrite schedule and catch him if you can; if not, he tweets.

Cory Lebson

As the author of The UX Careers Handbook, Cory Lebson is the go-to-guy for anyone who wants to define their career path in the rapidly changing UX scene.

The book covers everything from UX study to career roadmaps and becoming a thought leader. But you don’t have to buy a copy straight off – Cory’s blog also contains great advice and musings on UX, user research and usability.

Ethan Marcotte

Head of responsive design? Ethan Marcotte is the guy who coined the term that went on to become one of the biggest web design trends of the last decade. He literally wrote the book on RWD.

He blogs infrequently, but his Twitter feed is a firestorm of web rants, expert insights and UX gold-dust.

Don Norman

We left the Grandaddy of UX until last. Don Norman is the man behind the term ‘user experience,’ the UX sensei for user experience and usability. He’s the Norman behind the Nielsen Norman Group and has opined on UX everywhere from Harvard to Seoul. Keep up with his frequent video presentations via his website.

The post 10 UX Influencers To Follow Now appeared first on Speckyboy Design Magazine.

Breadcrumbs make up a kind of secondary navigation method that function a little like a progress bar. You will typically find it just below the main navigation bar.

Some web designers believe breadcrumb navigation does not improve the user experience, and maybe it isn’t for every website. However, there are situations when it can be extremely useful.

When Should You Use Breadcrumbs?

You’ve probably seen breadcrumb navigation in many of the websites you visit. You can see them on the Best Buy website…

…and on Amazon.

You can trace the page you are on back up the hierarchy, so you know exactly where you are in the site’s architecture. It is like those sitemaps you see in the mall or a building, where they mark the spot on the map where you are standing as “you are here.” You can then follow the directions to the exit, if you want.

You obviously would not need something like that in a one-story building where you can see everything. It is the same with a website. You will only need breadcrumb navigation when you have three or more levels to your site arranged in a hierarchical manner. In its simplest form, breadcrumb navigation links are arranged horizontally and separated by a “>” symbol, which signifies the level of the page in relation to the links just before it. Its purpose is to prevent your users from getting lost in your site.

For example, if a user makes a search and land on a page deep in your hierarchy where they don’t want to be, the breadcrumb navigation will help them find their way back to the homepage. They simply have to click on the link for the level they want to go back to all the way back to the homepage.

Type of Breadcrumbs

You will find one of three main types of breadcrumb navigation in most large ecommerce types. They are location-, attribute-, and path-based:

1. Location-based navigation

Breadcrumb navigation based on location shows a user where they are in the site’s structure, usually one with more than two levels. The first level is always the home page, and ends in the current page, which is not clickable.

It is useful not only for users to help them find their way, but also to give search engine technology information about the page’s content, making it easier to index.

2. Attribute-based navigation

This type of navigation shows the attributes of a specific thing on a page instead of its location. It is based on the metadata of the link which can branch out into different paths, so it presents the user with a choice of where to go next. It is commonly used in eCommerce websites because its descriptive nature makes it easier for a shopper to find what they want. Attributes are separated by a vertical pipe.

You can have a combination of location-based and attribution-based navigation, depending on the products you offer. Location-based links are clickable, while attribute-based links are not, but you can click on the “X” to remove an attribute.

For example, you could be looking for men’s casual shirts with long sleeves and you end up on a page for short-sleeved shirts. Click the “X” for the attribute “short sleeve” and choose “long sleeve.”

However, because there are so many options with attribute-based navigation, it can make it hard for search engines to index because of duplicate content.

Path-based navigation

This type of navigation is more of a history trail than anything else, so it serves more like the back button than a navigation bar. It tracks what steps the users took to get to a particular page. It is not recommended for navigation purposes because it is not really helpful. It can even be confusing for people that land on a page deep inside the site.

Benefits of Using Breadcrumbs

Breadcrumbs are beneficial for some sites with the proper implementation. They make it convenient for users to go to higher levels without having to go through hoops. It reduces the number of clicks the user has to make to get to a particular page, which can help keep users from bouncing. It doesn’t even take a lot of space, so there is no real reason not to use it when appropriate.

Tips for Using Breadcrumbs

• Depth – As mentioned earlier, you should only use breadcrumbs for sites with 3 levels or more.
• Homepage – Your homepage should always be the first level, because that is where all your main categories will be as well as your about and contact page.
• Symbol – It is recommended, although not required, to use “>” instead of “/” to separate the links because “>” indicate direction.
• Position – Indicate by some change to the text where the user is, although that is usually at the end of the chain. Use a text label which is not clickable and bold it.

Conclusion

Breadcrumb navigation is not for everyone, but for many large websites with complex structures and many products, it could be a big help to your users. The fact that it can also help your SEO is not bad, either.

The post Making the Most of Breadcrumbs in Web Design appeared first on Speckyboy Design Magazine.

This quick phrase could’ve saved me hundreds of hours and thousands of dollars, but like so many beginners before me, I didn’t listen.

There are countless stories of overcomplicating simple tasks, like the US space program’s epic fail while searching for an anti-gravity pen to use in space. Instead of just buying a $1 pencil, the space program apparently went on a multi-million dollar spending spree.

It’s tempting to overdo things as a beginner, trying to show off everything you’ve learned, but it’s a costly mistake that most UX veterans avoid like the plague. Instead, experienced designers understand that it’s best to keep things super-simple.

Keeping your design simple not only looks better to users, but it converts better too. Here are eight ways to implement user-centered design, and boost your conversion rate in the process.

What Is User-Centered Design, Anyway?

Put simply, User-Centered Design (UCD) is a set of principles that focus design on the user’s needs, desires, and limitations.

By focusing on how users interact with your existing website, you can improve upon its structure, interface, and content to make it more appealing, organized, and useful for them.

User-centered design involves making overall organization, interface, and presentation of content more accessible and cohesive. When visitors to your website can navigate your website easily and find the information they’re looking for, they’re far more likely to convert into buyers.

User-centered design simplifies common tasks and highlights important features and functions. Websites that implement UCD have sensible architecture and navigation that avoids pitfalls such as human error and other frustrating problems.

Get Rid of Obstacles

In order to increase conversions on your website, user-centered design seeks to eliminate user fatigue, doubt, and lack of feedback. Ultimately, the goal is to minimize the amount of mental effort the user must exert in order to get things done.

Eliminate Visual Clutter

Maybe your website has visual elements, graphics and other content that don’t help your users. And identifying these distracting elements among the helpful, productive content is easier said than done.

Make sure your content shows only what the users need to see in order to lead to your desired result. Remove colors, images, layouts and links that don’t add value to their experience, and use environment-like backgrounds on images to reduce distractions.

Simplify the Path to Conversion

From the moment your users first get to your website, they embark on a path to conversion made up of a series of steps. And they can cancel the process at any step along the way, simply by closing a browser window, getting distracted or frustrated, or running out of battery life on their mobile device.

Don’t let it happen to you. Make the path toward conversion a short one, and the steps along the way should be very easy. When my design agency, X3 Digital, added a contact form to the bottom of our home page, we dramatically increased our monthly form submissions. By reducing the mental effort of the entire contact process, we reduced steps and increased our conversions.

Use Clear and Conversational Content

Website visitors don’t like content presented in a “wall of text” format, and may be easily discouraged, overwhelmed and bored because of it.

Make sure your content is straight and to the point. It should be conversational, and easy to read. And if the message is better conveyed as an image, chart or other visual device, use that instead. When I wrote a tutorial about how to make a website, I first needed to understand exactly who would be reading the post.

Afterwards, I made sure that the tone of the article matched the typical language of the readers. This is instrumental in improving your content.

Speak One-On-One, Right From The Website

Customers sometimes need a more direct approach when it comes to assistance, or may have doubts about how certain things work. When they can’t find answers to their questions, they will abandon their purchase and leave your website. Sometimes live chat is all that you need to save your conversions.

Also, live chat is an opportunity to build relationships with your customers, garner positive reviews and gain some insight into what works and doesn’t work in your website.

Make Your Forms Easy

Anyone who has ever filled out a contact form on a website knows that they are obstacles. They can be tedious, intrusive, and sometimes clumsy. But they are necessary in order to get things done.

It’s up to you to keep user fatigue at a minimum by reducing the number of required fields that the user has to fill in. To keep things as easy as possible, keep related information in groups.

Customers also hate clicking on the “Submit” button, only to have it return with errors. Be sure to give feedback at the completion of every step, whether by highlighting correct inputs, or suggesting revisions.

Don’t Forget Mobile Users

As much as users like to fiddle with their mobile devices, conversions on mobile phones have always been significantly lower than on other devices.

The reason? Credit different usage patterns. If you haven’t optimized for mobile users already, it’s time to consider implementing one right away.

A user-centered design for a mobile site would be highly simplified, reducing the amount of text, and having more white space around call-to-action buttons and input fields.

Also, since cellular data plans have limitations, use visual elements that are compact and efficient, improving site speed. Remember, it’s a race against time.

Be Persuasive, Yet Subtle

Visual Design. This element will make your website’s first impression, and will influence your users to give you the benefit of the doubt. By using professional illustrations and photography, a clever color pallete, and implementing a user-friendly layout, users will spend more time on your site, and your conversion rate will improve.

Value Proposition. A value proposition is a clear, direct statement of what your product will specifically do to help your users. Users will find it reassuring that they’ve come to the right place, and that you will deliver on your promises.

Call-To-Action. Be sure to have this button on your website, and that it is clear and clickable, with plenty of white space surrounding it. This button represents the end of the user’s journey and the moment a website visit converts into a sale. Again, keep it simple, and make it clear as to what will happen when your user clicks it.

Next Steps

Jeff Horvath of Human Factors wrote:

“A good user experience, like a measurable ROI, doesn’t typically happen by accident. It is the result of careful planning, analysis, investment, and continuous improvement.”

Designing with users in mind means your website’s interface should be straightforward, logical and intuitive, while maintaining the right aesthetic. This requires strategic placement, spacing and visual coding techniques that facilitate all the actions that can result in sales.

Your website content needs to resonate with your users, delivering marketing messages that answer their questions and are relevant to their needs. This can be accomplished through research and strategic writing to keep users engaged.

Keep your users in mind when you design your website, and they will reward you with conversions.

The post How User-Centered Design Skyrockets Conversion Rate appeared first on Speckyboy Design Magazine.

There’s a lot more to creating an ecommerce site that sells than a fast loading, mobile-responsive design. When it comes to converting traffic into money, UX matters. While there are hundreds of potential best practices to follow, there are also common UX mistakes that kill customer confidence.

1. Complex, Over Designed Navigation Menus

Navigation is a central aspect of user experience. Moving people through category, product and checkout pages requires a well thought out information architecture and clear click path.

The goal with menus is to help people find what they are looking for, not show off your creative design skills. Some common mistakes with navigation are:

• Going overboard with icons
• Pushing promotional products in mega menus
• Not including bread crumbs
• Too many top level items

How to get it right: keep it simple. When it comes to navigation, I am a bit old school. Hamburger menus shouldn’t be the default menu on large desktop screens. Make sure that your category hierarchy makes sense and that products are tagged with multiple categories. Someone looking for “snow boots”, might look under “shoes” or “winter apparel.” Use a multi-column drop down if you have a large number of subcategories.

2. Shotty Site Search

Depending on who you ask, 30% – 83% of ecommerce site visitors use site search as their primary way to navigate. Either way, you want to make it easy for visitors to use your search function, some studies show that site search users are twice as likely to convert.

Despite all this, eCommerce site search are plagued with problems. Functions like filtering are helpful, but not always necessary if you don’t have a large inventory. What is critical though is support for fuzzy and exact product search. 34% do not support users’ searches by product name.

If someone knows the exact product name or model number, buyer intent is high. If someone knows exactly what they want to buy, chances are they will use site search to find it. If your site search is broken, you’ll crush buyer confidence.

How to get it right: a high converting site search starts with design. Basic principles like contrast and proportion can go a long way here. Check out how Walmart’s search function has evolved in size and contrast.

Walmart’s Header 2012

Walmart’s Header 2014

Walmart’s Header 2016

According to Ecommerce Illustrated, when Alinc Technologies tested a bolder border to its search box (right), it increased site search use by 13.2%.

Once you get the design right, make sure fuzzy, misspelled and exact searches for product names or model numbers give relevant results.

3. Cluttered Hero Design

One of the most common mistakes I see with ecommerce sites is the use of a slider on the home page. What a waste of premium real-estate! Pretty much every template I see for sale boasts sliders as a premium feature. I don’t know if the designers are pushing it or if they are just meeting customer demand. Either way, test after test reveal how problematic sliders can be.

Usability guru, Jakob Nielsen calls them “deadly.” Here’s why:

• Auto-advancing sliders increase cognitive load and disrupts the thought process
• Users see them as ads and them don’t click on them
• Content is rarely relevant or focused
• Sliders are rarely implemented well on mobile
• They can cause SEO issues

How to get it right: sliders are often a byproduct of indecisiveness. Stakeholders want to promote too many things and display different messaging. Focus on creating a static hero image with a value proposition that speaks to your ideal customer. Use a call to action that entices them to click one more time.

4. Overly Complex Forms

On average, it takes 4.5 interactions before a user converts. Someone discovering your site and brand for the first time is probably not going to whip out their credit card. If you want visitors to return, capturing their email address or creating a new account is a surefire tactic. The problem, though, is poorly designed, overly complicated forms.

Yikes!

How to get it right: simple forms, with fewer fields tend to work better. Highlighting the active form field helps orient users. Form buttons are super important. Make sure the color stands out against the background. Avoid generic button call to actions like “Submit.” Button copy should clearly state the benefits of completing the form “Send Me My $10 Coupon.” A simple change of button copy can have a dramatic effect on conversions.

5. Mishandling Out-Of-Stock Products

Don’t let your out-of-stock products run-a-muck on your UX. Remember, the goal is to build user confidence with each click. Seeing a product that they like only to find out that it’s not available is a confidence killer. If you’re planning on getting more stock, you can have a back in stock notification app on your product page.

How to get it right: apologize and let them know when it will be back in stock. You can incentivize them to come back by offering a promo code or free shipping. You should also consider removing out-of-stock products from your category pages or labeling them “More on the way soon.”

6. Hidden Money Button

Speaking of buttons, I’m not sure why any eCommerce site would want to hide their “Add To Cart” button. Many WooCommerce themes even hide the button for the default setting. Can someone explain why?

Someone may end up on your page, not see the button and assume its out of stock or not available. Yes, I understand that you might have to select a size first, but there are better ways to handle this. How would you feel if you were all excited about buying a product online, but wasn’t sure if was in stock.

Uncertainty = lost confidence.

How to get it right: don’t hide the first button you need people to click on to make money. If users need to select a variation first, you can:

• Grey out the Add To Cart Button and add bold colored copy near the button that states “Please Select an Option”
• Have a button state that says “Please Select an Option” with an arrow on the option that needs to be selected. When the option is selected, change the button state to say “Add To Cart”

7. Skimpy Product Photos

When it comes to UX on ecommerce product pages, product photos are right up there. People cant’ touch your products, so photos are main way they can experience them. Large, clear photos can increase conversion rates.

How to get it right: Use large, clear photos on white backgrounds. Show your product in multiple angles and include a zoom feature.

8. Tiny Tap Targets

Tiny tap targets are a prime example of a desktop-first mobile responsive design. Just because something is easy to click with a mouse, doesn’t mean it will be easy to tap on mobile.

This graphic sums it up [Illustration by Stéphanie Walter, licensed under a CC BY-SA 4.0]

How to get it right: with more and more sales coming from mobile designs, you better make sure your tap targets are finger friendly. Google recommends that tap targets/mobile buttons are at least 48px tall/wide.

9. Invisible Customer Service

When it comes to eCommerce, customer service and UX make up the entire customer experience (CX). An eCommerce site without clear links to customer service policies, a phone number or live chat is like walking into a retail store with no employees.

How to get it right: have clear links to customer service policies (like shipping and returns). Understand that CX and UX can work together to give you a competitive advantage. In fact, most customers (85%) have said that they would pay up to 25% more for a superior experience. If your selling to millennials, consider adding live chat. Over 60% of millennials prefer live chat over other contact methods when wanting to ask a question.

What other ecommerce UX mistakes drive you nuts?

The post The eCommerce UX Mistakes That Drive Us Nuts appeared first on Speckyboy Design Magazine.