Tuesday, September 19, 2017

3 Overlooked Tweaks to Optimize Website Usability

According to Adobe, given 15 minutes to consume content, two-thirds of users would rather consume something that's visually appealing, than something plain. But, users also expect websites to load in less than 5 seconds at least, therefore designing a website (or app) for speed and satisfaction should be every designer's focus.

It's difficult to overlook visual design simply because we, as designers, love to design visually appealing things, and while aesthetics are still very important, given a limited amount of time, designers tend to drop the ball with usability. Optimizing app/website usability requires a deep understanding of your customer's goals, and can be measured in different ways:

  1. How clear is the UI?
  2. How many "roadblocks" are there?
  3. Does the navigation follow a logical structure?

Let's talk about optimizing these details for usability.

1. Fewer Choices

Making choices requires effort, so reducing that effort by unscrambling or even eliminating unnecessary roadblocks for users will reduce what's called analysis paralysis, which describes the moment when users become confused or frustrated as a result of having too many options to consider.

Analysis Paralysis

According to a study conducted by psychology experts Mark Lepper and Sheena Iyengar, who analyzed the behaviors of 754 consumers confronted with multiple choices, more choices tends to result in fewer sales. Here's how the study went:

On the first day, in an upscale food market, a table with 24 varieties of gourmet jam was set up, but on the second day, the table was set up with only 6 varieties of gourmet jam. The results showed, that the table with 24 varieties of gourmet jam attracted more interest than the table with only 6 varieties, however the 6-table surpassed the 24-table in sales. This is depicted in a well-known saying, "spoilt for choice".

An excessive number of choices can result in this analysis paralysis, which is when users are unable make a decision because they're faced with too many options. If you consider the different varieties of jam mentioned above, some of them may be cheaper, whereas others may be better tasting. Some of them might be larger, too. Our brains will try to decipher which offers the best bang for the buck, which takes time and thought, so the result is slower conversion, or even abandonment.

Further reading: Hick's Law. Hick’s Law states that the time it takes to make a decision increases with the number of options. This law validates this concept of reducing the number of choices to boost conversions. "Less is more", as they say.

Solution: Personalized Content

Anticipatory design (which is used by brands like Spotify, Netflix and Google) is used to help to reduce decision fatigue, where artificial intelligence (AI) is used to anticipate what the user wants. Possibly the most basic example of this of when apps and websites display their "Most Popular" content, where the logic is that users might be interested in a certain type of content simply because other users have done so previously.

For retailers, an alternative could be to group "Best Selling" or "Most Wished For" items, like Amazon's "Customers who bought this item alo bought" recommendation engine. Fun fact: Amazon's recommendation engine is responsible for 30% of their total revenue, where the AI anticipates what the user will want to buy based on their Amazon search history, and what's currently in their basket!

Personalised recommendations

2. Dead-Simple Navigation

For websites with multiple categories and sub-categories, navigation UX should become a top priority, especially on mobile devices where analysis paralysis can be even more confusing, simply because mobile websites are typically harder to navigate.

In order to improve usability, a fair number of menu items to include is a maximum of 7 (and the same applies to drop-down menus). Doing this also makes it easier to indicate the user's location within the website, which is known to lower bounce rates.

Continue reading %3 Overlooked Tweaks to Optimize Website Usability%


by Pius Boachie via SitePoint

Moonlight

Architecture, Decor & Interior Design WordPress Theme


by csreladm via CSSREEL | CSS Website Awards | World best websites | website design awards | CSS Gallery

Visual Arts Exhibition Theme

We are excited to share with you our latest introduction Visual Art theme, which comes in 4 astonishing variants namely Art,Craft,Decorative and Visual Art.


by csreladm via CSSREEL | CSS Website Awards | World best websites | website design awards | CSS Gallery

Krypto Startup Contest

Landing page for Krypto Startup Contest.


by csreladm via CSSREEL | CSS Website Awards | World best websites | website design awards | CSS Gallery

GR Capital

GR Capital investment fund site is clear, interactive and easy to read. It has only essential information with no visual noise.


by csreladm via CSSREEL | CSS Website Awards | World best websites | website design awards | CSS Gallery

12 Useful WordPress Plugins for Page Layouts

Taking CSS Linting to the Next Level with Stylelint

As front-end development has matured, the use of tools addressing code quality has grown substantially.

This is perhaps most evident when looking at the JavaScript ecosystem. Using a JavaScript linter is now the expected standard for front-end developers to ensure that their code is well structured and consistent. In fact, in my recent tooling survey, the vast majority of developers stated that they lint their JavaScript.

When it comes to writing CSS, the drive towards using code quality tools has been a little slower, with the majority of developers in that same survey stating that they chose not to use a CSS linter in their workflow.

Stylelint Demo

I want to address this shortfall today, looking at one tool in particular that has raised the bar when it comes to linting stylesheets: stylelint.

It’s worth noting up front that although I reference CSS throughout this article, these references are interchangeable with a preprocessing language such as Sass. Stylelint can evaluate Sass and Less files as well as plain CSS and we’ll look at this in more detail later in the article.

A (Very) Brief History of CSS Linting

When CSS linting was first introduced as a concept, it was fairly polarizing. Shortly after CSS Lint was introduced back in 2011, I remember reading an article by Matt Wilcox called CSS Lint is harmful, which criticized the opinionated nature of some of its rules – a sentiment that was shared by many in the community.

Looking back, CSS Lint was much like the first JavaScript linting tools that were available, such as JSLint – opinionated and not very flexible. However, while tools such as JSHint and ESLint emerged and pushed JavaScript linting forward, alternatives in the CSS linting landscape were non-existent.

That is until stylelint arrived on the scene.

Why Stylelint?

There are a few reasons why I think stylelint is now the best tool available when it comes to linting your CSS.

Firstly, it is completely un-opinionated. That means you can enable as few or as many rules as you like, with a number of its rules giving you options to configure them to your preferences.

Also, it has a huge array of rules available – over 150 in fact, not including language specific rules for preprocessor specific syntax. Spending a little time to look through these is invaluable to building up a set of rules that fits how you write your styles.

It is also very flexible, understanding CSS and CSS-like syntax such as SCSS and Less. So whether you want to lint preprocessor code or vanilla CSS, stylelint has you covered.

Lastly, and perhaps most importantly, its documentation is excellent. Want to see what rules are available? Check out the detailed documentation covering all available rules. How about some advice on how to contribute a new rule that you might like? They have a great developer guide to help you with that too.

What Can Stylelint Do?

The value of adding a linting step when developing in any language is to improve the consistency of the code that you’re writing and to reduce the number of errors in your code.

When applying this to CSS there are a number of issues that stylelint can help you address.

Syntax Errors

Syntax errors are not subjective errors and should be very clear once highlighted.

Consider the following example:

[code language="css"]
.element {
color: #EA12AE1;
disply: block;
}
[/code]

The above code shows two different syntax errors. The first error is an invalid hex color. The second is a typo when declaring the display property.

These are pretty basic syntax errors that can get picked up by stylelint using rules such as color-no-invalid-hex and property-no-unknown, saving you the headache of having to find the mistake manually.

Formatting and Consistency

In CSS, code style preference can be extremely subjective. Chances are the way that I like to write my CSS isn’t the way that you prefer to write yours. It’s therefore important that a CSS linter can adapt to your preferences rather than trying to force a set of rules on you.

Consider the following styles:

[code language="css"]
.listing {
display: block;
}

.listing-item
{
color:blue;
}

.listing-img{
width : 100%}

.listing-text { font-size: block; }

.listing-icon {
background-size: 0,
0; }
[/code]

All of the rule sets above contain valid CSS, but they are clearly not consistent with one another in style. Use of spacing in each declaration is different and each block is formatted in a slightly different way.

This example shows just a few possible ways of formatting CSS. But in reality there are hundreds of subtle variations. Over a whole stylesheet (or multiple files), inconsistencies such as these can hinder the readability and maintainability of your code.

This inconsistency becomes more apparent when a project is worked on by multiple developers, as each one might prefer to write their styles in a slightly different way. It’s always beneficial to get together and agree on a set of formatting rules that you will all stick to in such a situation.

Stylelint allows you to customize a set of rules to match the way that you, or your team, prefer to format your styles. Whatever preferences you have, stylelint can check that these rules are being applied consistently across your project.

Continue reading %Taking CSS Linting to the Next Level with Stylelint%


by Ashley Nolan via SitePoint