Comics of the Week #388

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Time is money

Price matching

 

A book by its cover

Can you relate to these situations? Please share your funny stories and comments below…

Source

How to Balance Information Density in Web Design

Information density is the amount of information in the form of content that a site visitor is greeted with as soon as he lands on a website or webpage.

The greater the information density, the greater the amount of content a visitor will see on the site or page. Because of this tie-in to content, information density has an immediate impact on a user’s cognitive load, which in turn, has a huge impact on the site’s navigability, usability and user experience.

When designing, it’s helpful to think of how much content your user can reasonably handle without being bogged down by it. The more content they encounter, the longer it will take them to complete certain tasks and page goals…since the amount of mental processing power for them to complete tasks and goals drastically rises.

While it’s always tempting to load up a site with a lot of content to attract visitors, moderation and minimalism are the key to ensuring perfect user-friendliness.

Analysis paralysis, aka the paradox of choice, aka choice overload

Whatever you want to call it, too much information density will result in analysis paralysis for your users, which is disastrous from a web design standpoint. Good design means your users know what they should do at every point of interaction with your site, so if they’re getting frozen in their actions because too much information is confusing them, you’ve got a problem.

Excessive information density leads to too many choices for your users.

Consider the following scenario:

1) One product page features an image, a headline, a description, the price, a call to action and some reviews.

2) Another product page features several images, a few videos of the product, a bunch of testimonials, ratings, reviews, celebrity endorsements, excessive copy, a headline, subheadings, various calls to action for everything from an email sign up to an “add to cart” button, recommended products for cross and upsell purposes, etc.

Clearly, scenario two is the bad design because it is the epitome of analysis paralysis.

Let’s look at a short and simple example of a successful site where information density is kept to a minimum to ensure excellent user flows.

On 1-800 Pet Meds’ product page, note how the goal of the page is clearly outlined, as users simply have to pick a flavor, size and quantity before adding to the their cart. Unnecessary clutter is completely removed, so shoppers can make the purchase with little friction.

This begs the question: how do you keep the information density to a minimum to ensure great UX?

What to do to keep the information density reasonable

As a designer, you have the ultimate power to make sure your site’s density remains under control. When in doubt, always err on the side of less is more, to ensure your user’s cognitive load doesn’t make it hard or even impossible to successfully perform routine tasks and actions on the site.

Start by ensuring each page and the site overall have a grand plan before you begin the design in earnest. This means asking yourself what the goal of the page should be, and what the information architecture should be to accomplish that goal.

In other words, put yourself in the user’s shoes. As a designer, it should be 100% clear to you how your user will achieve their page goal, whether you’re looking at the page on mobile, a tablet or on desktop. The user flow should be well-defined, crystal clear, and so simple that even unsophisticated users—i.e. those who don’t use the web all that much—can successfully complete the task.

Let’s look at another example of keeping information density under control, so that the messaging is effective and the UX is a pleasure.

On Ford’s landing page for garage services for their vehicles, there’s no ambiguity whatsoever about what the goal of the page is and how visitors should accomplish that task. That’s because the page has relatively few elements, so less distraction from the page goal. When these conditions are met, the information density is manageable, making for excellent UX. Here’s what this page does right:

  • Clean design with a lot of white space to focus user attention on page goal and content
  • Big, noticeable and vibrant call to action button
  • Clear call to action button microcopy
  • Persuasive messaging above the call to action button
  • Clear user flow and path to page goal

Thanks to this page’s design, the user looking at the page isn’t going to feel overwhelmed and unable to complete the easy task of making an appointment for garage service. That’s because cognitive load was minimal, as the page used relatively few elements to clearly communicate what had to be done to complete the task.

The other extreme

Extremes are never good, no matter what side of the spectrum the pendulum’s on. Just as you can provide a bad UX for a site with too much density, you can just as much ruin the UX when you have very too little content.

As this report on minimalism in web design puts it, when your approach to minimalism is too extreme so that your interfaces feature very low information density, you risk making it very hard for your users to find the stuff that they’re looking for. When this happens, the UX suffers just the same, and designers need to remember to first design for users instead of sticking too closely to any design ideology.

In other words, minimalism is always a smart choice in design, but it has to be minimalism in moderation.

For a great example of moderate minimalism with information density that’s under control, we look to Weebly’s homepage.

Note the huge, attention-grabbing headline, the value proposition, the description, the tagline, and the simple and clear call to action.

Information density is crucial

Information density, or the amount of content that a site shows its visitors, plays a huge role in several factors, including the UX, whether the visitor is able to complete the end goal or not, and, ultimately, page conversions.

Designers need to think about how dense the content is that they’re presenting to their users. They need to think about this from the very beginning, even before they put in the first line of code. During the wireframing process, designers need to start considering how the information density on their new site will be handled.

In general, designers ought to aim for minimalist information density, so it doesn’t overwhelm visitors. The caveat to this, though, is that it can’t be excessively minimalist, as that will create the same types of UX problems with “findability” and discoverability that too much content also creates. Balance is the key to awesome design.

Source

How to Create and Manage SVG Sprites

SVG is winning the race when it comes to graphics that scale on the web. Designers and developers are choosing SVG in lieu of icon fonts, raster images, and raster sprites.

The benefits of using SVG are numerous but to me, it boils down to scalability.

Using SVG can be as simple as copying and pasting the exported code from a vector-based program. From there the problem lies with delivering those graphics in the most efficient manner.

Enter SVG sprites. These work in a similar pattern as image sprites do though, how they are created and included on a web page is very different.

Why Use Sprites at all?

Sprites help increase speed, maintain a consistent development workflow, and make the creation of icons much faster. SVG sprites are typically created using icons of a similar shape or form whereas larger scale graphics are one-off applications.

In many cases, an icon library will scale in size. Adding new icons needs to be efficient and ultimately easy. SVG sprites help make this a reality.

Exporting SVG Code

SVGs can be exported from your favorite vector graphic program. I tend to use a mix of tools and have found that all of them have great support for exporting SVGs. Sketch stands out in particular because you can select an icon or graphic and hit command + c and have that SVG code copied to your clipboard. Then you can head to your code editor, paste the code, and have the graphic appear before your eyes in the browser.

Optimizing SVG for Web

Sadly, if you were to copy and paste from Sketch you may find that the code is suboptimal and could be better optimized. There are some tools for that.

If you use Sketch in particular, check out the SVGO Compressor plugin. As you export SVGs the plugin automatically optimizes them before saving the file.

If you don’t use Sketch check out the same functionality in app form or if you prefer web apps, Jake Archibald put together one for you.

Creating SVG Sprites Manually

Creating an SVG sprite can be done manually. You will need a vector design program that can generate SVG code. For this, I’ll make use of Sketch and export a few icons as SVG.

After exporting the icons and running them through the SVGO Compressor plugin I’m left with the following for each icon. Note that at this point each icon is a separate file:

<!-- aircraft.svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="62" height="51" viewBox="0 0 62 51">
 <path fill="#000000" d="M38.9872..."></path>
</svg>

<!-- attachment.svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="64" viewBox="0 0 60 64">
 <path fill="#000000" d="M15.9264..."></path>
</svg>

<!--brush.svg-->
<svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 62 62">
 <path fill="#000000" d="M7.8416..."></path>
</svg>

<!--camera.svg-->
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="52" viewBox="0 0 64 52">
 <path fill="#000000" d="M32,19.2 ..."</path>
</svg>

Now that our SVGs are all optimized we can begin creating the sprite using the code above. To create a sprite start with the surrounding <svg> element which will serve as a container for all the icons. This element will need to be within your document similar to the code below:

<!DOCTYPE html>
<head>
 <title>SVG Sprites</title>
</head>
<svg style="display:none;">
 <!-- icons will go here -->
</svg> 
</html>

Notice how the SVG has an inline style of display:none. This is required to properly utilize SVG sprites. Even though the icons won’t render on the page a large amount of space will. To avoid this extra space the SVG creates, we are hiding the SVG with CSS.

Simply including the code from the icons won’t suffice at this point. We need to make use of a <symbol> element which will allow you to embed the SVG code as well as supply it’s own specific viewBox attribute which is important for icons that might display at different widths and heights.

Elements defined inside the <symbol> element can only be rendered to the browser when referenced by the <use> element.

The final sprite resembles the following snippet:

<!DOCTYPE html>
<head>
 <title>SVG Sprites</title>
</head>
<svg style="display:none;">
 <symbol id="aircraft" viewBox="0 0 62 51">
 <path fill="#000000" d="M38.9872..."></path>
 </symbol>
 <symbol id="attachment" viewBox="0 0 60 64">
 <path fill="#000000" d="M15.9264..."></path>
 </symbol>
 <symbol id="brush" viewBox="0 0 62 62">
 <path fill="#000000" d="M7.8416..."></path>
 </symbol>
 <symbol id="camera" viewBox="0 0 64 52">
 <path fill="#000000" d="M32,19.2 ..."</path>
 </symbol>
</svg> 
</html>

Notice how I’ve added id attributes to each symbol element. This is important because when you reference a specific icon in the sprite you need a unique way to target it. Also, notice how each icon has it’s own unique viewBox parameters. The first two parameters will almost always be “0 0”; the second two will be equal to the size of the icon you have exported.

Including an icon on the page

With the sprite all ready to go we need a way to include specific icons on a page. To do this you will utilize the <use> element written like this:

<svg>
 <use xlink:href="#aircraft"></use>
 <svg>

On your page, you should see the icon appear and that’s really all there is to it!

Automating SVG Sprites

Creating inline SVG sprites isn’t all that hard. The problem lies with the fact that many developers need to create sprites for hundreds of icons or more for robust applications. Creating something like that by hand could get time-consuming and tedious. Developers need a way to automate the process so they aren’t wasting time creating sprites by hand.

Luckily, there are tools for such a thing. Task managers such as Grunt or Gulp have plugins available to use. These streamline the creation of the SVG sprites. By supplying each SVG file within a given directory the plugin will both optimize and generate all the SVGs in your referenced directory to be included in a fresh new sprite.

If you need to add more icons to the sprite all you really have to do is export the icon as an SVG and add it to the same folder. From there the plugin handles the time-consuming part.

Some available plugins in different flavors: grunt-svgstoregulp-svg-sprites, svg-sprite.

Conclusion

As with all things in web development, there is more than one way to create SVG sprites. You can reference them externally, include them via CSS, and even make them responsive.

 

Source

6 Ways to Make Usability Hygiene Work for You

The term ‘usability hygiene’ was firstly introduced by Google in the context of the basics that need to be addressed in order to prevent user frustration.

In this article we will look at six key areas of mobile design you should pay special attention to, in order to create a positive user experience.

1. Ensure Content is Accessible When User Has No Internet Connection

According to recent research by Google, 34% of users prefer an app over a mobile website when they have a poor internet connection. When they open an app, they expect to see lots of content there, regardless of whether they are connected to the internet or not. It’s vital to make key content accessible even when there is little or no data connection. If the content isn’t there, users will get frustrated and switch to a different app which does a better job of caching the information they want to see.

Below is an example of how Apple Maps (left) and Google Maps (right) use their cache. Google Maps remembers the last location and holds an impressive amount of map detail in the cache, while Apple Maps shows you absolutely nothing. Not much good to be said about Apple Map’s offline experience.

2. Design For Each Native Mobile Platform

A huge factor in making your app’s mobile UX shine is its UI. Today, most developers want to distribute their apps on multiple platforms. As you plan your app for multiple platforms, keep in mind that each platform has it’s own visual language—a distinct set of conventions and styles which should be followed.

For example, there are global elements, such as a status bar and header, which appear on all the pages of your design. The difference between the two platforms seems quite insignificant—slightly different size, different title text alignment (on Android, the text is left aligned, whereas for iOS it’s centred) and fonts (Roboto on Android, San Francisco on iOS), but you shouldn’t change any of these settings if you want the app to feel native.

The same goes for buttons and other controls—radio buttons, check boxes, fields, switches—all functional components should give a native feel. If you replicate elements from one platform to another, you risk compromising the user experience and conversion. The differences are small enough for you to progress with one design, but these subtle differences are essential for a native look.

If you want to customise user interface elements in your app, you should customise carefully according to your branding—and not according to the conventions of a different platform.

3. Nothing in Your App Should Be a Dead-end

Designing a UX is designing for flow and flow is, in most cases, about moving forward to accomplish a goal. You should avoid creating dead-end pages in your apps because dead-ends create confusion, block users on their way to the goal and lead to additional and unnecessary actions. Take an error-state screen from Spotify as an example. It simply doesn’t help users understand the context and doesn’t help them find the answer to the question: “What can I do about it?”

4. Don’t Replicate the Web Experience to Apps

Users expect certain interaction patterns and interface elements in mobile apps. What we design on the web often feels awkward in a mobile app—not necessary because something is wrong, but because it’s simply different from what our users expect to see. One common example is using text with underlined links, which are strongly associated with web pages. Below is an example of sign-in form from TD Bank app for iOS. It definitely feels like they design for mobile web, not a mobile app: links are underlined, and there’s even a copyright notice in the UI.

Apps use buttons, not links.

5. Don’t Interrupt Users with Requests For Rate the App

No one really wants to be interrupted, much less for something useless while they’re in the middle of something important. Despite that, quite often apps interrupt users by prompting them to leave a review. The worst of all is when this dialogue interrupts users in the middle of the task or right after the app launched.

You should avoid interrupting users to ask them to rate your app if they’ve only recently downloaded it, or only used it a few times. There’s nothing wrong in asking for a review, but remember that you want to give your users a great experience first. Wait until they prove to be repeat users and find a moment in your app that’s the least intrusive. Clear, a to-do app for iOS is a good example: it shows “Rate the app” dialogue after the user has cleared the remaining tasks from a list. This is a great moment in the app: users are feeling good for having just cleared their todo list and will be more likely to rate the app favourably.

6. Don’t Take Users to the Browser

Keep users in-app at all times. If your app lacks a specific feature or content, try to use an in-app browser; but do not invoke the smartphone browser, or you will cause users to lose their track and not return to the app. This will increase abandonment and reduce conversion.

When a user clicks on “Forgot Password?” link in the Facebook app the app prompts the user to launch the browser in order to perform this action.

 

Source

Bookmark’s AIDA Sets New Standards for Design AIs

There has always been an innate fear of artificial intelligence in the creative communities, not least in web design. First developers, and more recently designers, feared they were about to be replaced. From Frankenstein to Hal 9000, artificial intelligence forms the backbone of numerous fables about the danger of technology.

However, the reality is quite different. According to a research paper published by Harvard University, which compared the 270 occupations listed in the US government’s 1950 census with the present day, only 1 occupation has ever been replaced by automation: elevator operator.

only 1 occupation has ever been replaced by automation

The truth is that AI, machine learning, automation, and design convergence are aids to the creative professions, not competition.

Take Bookmark’s latest innovation: an artificial intelligence for their online site builder. To use it, you enter your business name, and the sector you operate in, and the technology automatically selects the style of site that suits you. But that’s not the end of the story, because the generated design is just the starting point. You’re now free to customize your site according to your own taste. Bookmark’s artificial intelligence is a design tool, to be used as you see fit.

Bookmark aren’t the first to the market with this type of technology, but like most successful pioneers, they’ve learned from the mistakes of their predecessors. Unlike systems that hope to replace the designer, Bookmark empowers non-technical users and professionals alike, making you the designer.

Bookmark empowers non-technical users and professionals alike

This emphasis on design tool, rather than design crutch, is personified (literally) by AIDA, Bookmark’s Artificial Intelligence Design Assistant. AIDA learns your business’ unique requirements and generates your site from millions of potential combinations. And the result? A carefully tailored beautiful website that fits your unique business and industry needs. In less than two minutes you can have a fully functional e-commerce site, as good as anything you can install in your friendly neighborhood CMS.

Of course Bookmark’s AIDA can’t replace the high-end, bespoke design that forms some of the most original sites on the web, but it doesn’t try to. There will always be room for high-end, bespoke tailoring, but for most people, most of the time, a simple off-the-peg denim and t-shirt combination is fine; so it is with Bookmark, for most sites this is everything you need.

Quite apart from the design possibilities that AIDA offers, anyone who uses the web should be celebrating this revolution for one simple reason: AIDA bases all of its design choices on your content. That’s right! We’re heading back to a web where content (not marketing) is king, and sites with the best content rise to the top. Bookmark’s AI website builder adjusts the design of your site based on your focus. And because your business’ focus is unique, so will be the site AIDA designs for you.

Bookmark can create anything from a high converting e-commerce store, to a viral résumé. All of the designs are fully responsive, and based on your unique content. If you’re looking for an AI design process that puts you in control, the Bookmark website builder could be the option for you.

 

[– This is a sponsored post on behalf of Bookmark –]

Source

Local by Flywheel – an Easy Way to Develop WordPress Sites Locally

When you develop a site on your local machine you don’t have to worry about the time and bandwidth used in uploading files, or hiding development sites from view until they’re ready to be published. Having a local version of your site locally also provides you with a staging environment where you can easily test any site changes out of…. Continue Reading

The post Local by Flywheel – an Easy Way to Develop WordPress Sites Locally is written by Rachel Adnyana and appeared first on WPKube.

Essential Design Trends, May 2017

Making a good first impression is a vital part of website design. The homepage is often the first experience a user has with a business or organization and a striking design can help create interest. This month’s trends all focus on homepage design elements that are just a little bit different than what users are used to seeing.

From a purely aesthetic trend in shallow hero headers and diagonal corner layouts to a user interaction trend in this or that calls to action, there are plenty of interesting ways to draw the attention of users.

Here’s what’s trending in design this month:

1. Shallow Hero Headers

For a while the trend with hero images have been big, bold images and videos that fill the screen, often from the top of the homepage to right about where the scroll starts. More designs are starting to back off of this oversized image trend for shallower hero images.

Much of the design is still the same. Hero headers still include nice images or text with a configuration that’s made to be looked at. But the images are about half as deep.

What’s nice about this concept is it helps move other information up on the screen. Body copy and calls to action that aren’t in the hero image appear higher up in the design, giving users something to do or click right away. It can help prevent clutter in the image itself, which can be pretty important if the image is busy or hard to pair with text effectively.

This design pattern can also add more whitespace to the overall design, making it feel lighter and easier to navigate. With more minimal styles still popular, this concept might be one of the factors that’s driving this design decision.

The toughest part of using a more shallow hero image is cropping. It’s one of those things you’ll want to think about early in the design process, all the way back to when you talk to the photographer about images. Because the shape is not as standard, you might need to explain how you plan to use the image to get a photo or video that will look good with that aspect ratio.

2. Diagonal Corner Layouts

Some trends are just too much fun to ignore. Diagonal corner layouts are one of those concepts.

These designs are exemplified by elements that are clustered in one corner of the screen – often the bottom right – and fan out onto the rest of the canvas. Elements are often positioned to look like they are bursting into the design.

Diagonal corner layouts provide a different eye tracking pattern for users by creating a focal point at the bottom corner of a design rather than the top left or center and create some depth with the idea of elements that seem to “explode” across the screen. (For an extra kick to the design, consider animating elements to enhance that explosion effect with movement as the user scrolls or hovers over specific elements.)

To make the most of these elements, many designs “hide” more elements below the scroll to add that extra element of reality so that parts of the design that you can’t see feel tactile and exist on the scroll.

While this type of design pattern doesn’t work with every type of content, it can be a good idea for designs that don’t have a lot of other art and use a lot of user interface elements to draw attention. It can also work for portfolio-style designs or serve as a way to organize many smaller visual elements into a single unit. 

3. This or That Calls to Action

Almost every website design includes some type of call to action. Whether it is a form to fill out, link to click or direction to keep scrolling for more content, the user is prompted to do something. (And they often receive something else as a reward for that effort.)

More designs are beginning to pop up with mirroring call to actions, that allow users to make a choice from the homepage as they decide what to do next. The design might look a number of ways, such as the direct would you cheat or not question from Words Hurt to the two-panel option from Stoli to the click-option navigation for the Hi Pointe Drive In.

This design style gives users control over what they want to do and see, which can be appealing with the right mix of content and choices. All three examples below do a great job of framing what the user can do and what will happen. (There are also outs if the user makes a wrong choice and needs to go back.)

The challenge here is that you need just the right kind of content for this design pattern to work. Some users can be overwhelmed by multiple choices and just want a single call to action with a single choice—complete the action or not. Here, users have twice as many options to consider. To make the most of choices, the content has to be wholly engaging.

Conclusion

Unlike some of the other trends we’ve explored recently, this month’s trends are pure visual elements that you can add to an existing design in the fly. (Although you might come close if you are lucky.)

These design schemes rely a little more on planning content and design to match, knowing that you have a certain concept in mind. It takes preplanning and in some cases even requires a little HTML or CSS magic to pull it all together.

What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter; I’d love to hear from you.

Source