Saturday 30 September 2017

Comics of the Week #409

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…

Rich but no budget

Extra work

No joint required

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

100 Exclusive Geometric Vector Patterns – only $12!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2017/09/comics-of-the-week-409/

Friday 29 September 2017

5 Surefire Ways to Get Users to Scroll

The days of “above the fold” are over. Long scrolling and infinite scrolling sites are becoming more and more popular lately, and it’s no coincidence that this technique translates well to mobile devices. The increased use of mobile screens has definitely played a key role in the widespread acceptance of long scroll technique: The smaller the screen, the longer the scroll.

Long scrolling opens a lot of new doors to designers. However, this pattern has its own drawbacks. It requires designers to pay a strong attention to content, navigation, and animation.

Here are 5 tips to follow to make sure that your long scrolling meets user expectations.

1. Provide Interesting Content Right From The Start

Despite the fact that people usually start scrolling as soon as their page loads, content at the top, visible part of the screen is very important. What appears at the top of the page creates an initial impression and sets a quality expectation for your users. Users do scroll, but only if what they see when they enter the page is promising enough.

To make sure that people will scroll, you need to provide content that keeps your visitors interested. Thus, put your most compelling content at the top area of the page:

Provide interesting facts (facts that attract visitors and keep their attention)
Use engaging imagery (users pay close attention to images and pictures that contain relevant information)

2. Give Users a Visual Cue

Sometimes the best way to make users scroll is to directly ask them to do it. Simply inform users that most of the content is available below the fold. A subtle visual cue, such as an arrow pointing off-screen or a text “scroll down”, can inform users that most of the content is available below.

Arrow pointing off-screen informs users that most of the content will be laid out below.

3. Keep Navigation Options Persistently Visible

Navigation is a make or break aspect of the user experience of a site. One of the biggest risks of using long scrolling in your design is a possibility of user disorientation. If the navigation bar loses its visibility when users scroll down, they will have to scroll all the way back up when they’re deep within the page . Usually, this behavior confuses and frustrates users.

The obvious solution for this problem is to use a sticky navigation menu which shows current location and remains on the screen in the same position at all times.

An example of persistently visible sticky navigation.

Mobile devices only: Since the mobile screen is much smaller than the desktop screen, a visible navigation bar can take up a relatively significant part of the screen. One way to solve the problem of a small screen estate is to hide a navigation bar when users are scrolling for new content and make it visible when users pull down in order to get back to the top.

4. Use Functional Animation To Engage Visitors

Creative effects like parallax scrolling and scroll-activated animations can engage users to scroll more. They turn scrolling into something more fun and make the user wonder “what will happen next?”

Consider breaking up your page into scrollable “chunks.” Within each chunk, you can introduce the content through creative animations. As users scroll, animations transition them to the next screen while creating a path of content to follow.

Parallax is another popular animated effect that can improve scrolling experience. Parallax effect creates an illusion of depth and immersion by making the background image move slower than the content in the foreground. When your site wants to tell a story in a smooth, linear fashion, long scrolling paired with parallax effect is able to create a completely immersive browsing experience.

5. Avoid Scroll Hijacking

Websites that implement scroll hijacking take control of the scroll and override a basic function of the web browser. Scroll hijacking is bad because the user no longer has full control of the page scroll and unable to predict its behavior. Users’ expectation of a website’s scrolling interaction shouldn’t be destroyed for the sake of narrative experience.

Apple uses scroll hijacking on their Mac Pro page.

Conclusion

Long scrolling is able to create a completely immersive browsing experience. It’s completely possible to make a journey as enjoyable as the destination. When users like the content on your site and find UI intuitive, then they won’t really mind the length of the scroll.

MacBooster 5: The One-Stop Mac Maintenance and Cleanup App – only $17!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2017/09/5-surefire-ways-to-get-users-to-scroll/

Thursday 28 September 2017

11 Experimental CSS Projects That’Ll Blow Your Mind

There’s a lot you can do with just CSS and a web browser. Great developers love to push the envelope and show just how much is possible.

While experimental projects aren’t always useful on production sites, they are incredibly inspiring and educational.

We’ve organized a handful of CSS projects that showcase the true power of CSS. These are all hosted on CodePen so you can even study and clone the source code to see how they work.

1. Gradient Loading Bars

This Sass loading page uses animated gradients and resizable elements to create a repeating loading effect.

Most people should recognize this loading animation from Facebook which uses a smaller version of this vertical bar loader. But most web loaders use animated GIFs since images are more compliant with all browsers.

This CSS3 loading bar proves that with some creative thinking to can rebuilt almost any animation style you want.

See the Pen Loading bars by MaxStalker (@MaxStalker) on CodePen.

2. Solar System Animation

Here’s one of the most complex CSS projects I could find online. This dynamic solar system design by Malik Dellidj runs on pure CSS without any images.

Every planet is rendered in CSS including the rotation speeds. This project is meant to be an accurate model of the solar system and it even features a realistic interstellar background to boot.

I can’t imagine how long this took just to make the planet icons, let alone get the animation speeds right. But where there’s a will there’s a way.

See the Pen Solar System animation – Pure CSS by Malik Dellidj (@kowlor) on CodePen.

3. Pure CSS Minesweeper

I never thought I’d see the day when classic Windows minesweeper could be played using pure CSS. Yet thanks to developer Bali Balo that day has come.

Note this doesn’t work exactly as well as the traditional Minesweeper because it doesn’t keep score properly. But it does track time accurately and it doesn’t use a lick of JavaScript.

Somehow even the interface looks surprisingly close to the original Minesweeper UI and it all runs on CSS. While it may not be a perfect replica it’s close enough to reel me into playing a few rounds.

See the Pen Pure CSS minesweeper by Bali Balo (@bali_balo) on CodePen.

4. Day and Night Toggles

On the surface this toggle switch may look pretty simple. It runs through a checkbox input and passes data onto the backend, although that’s not really the impressive part.

This toggle has a few features that make it one of the best frontend on/off switches:

The toggle icon changes from a sun to a moon
Stars and clouds animate into while switching
It’s designed with 100% pure CSS

Somehow this on/off switch catches every user click and uses that event to animate the day/night toggle area into view. The sun and moon icon designs are also nicely stylized considering they run on nothing but CSS.

See the Pen Pure Css “day and night” toggle by Benjamin Réthoré (@bnthor) on CodePen.

5. CSS Mouse Tracking

Traditional mouse tracking is the work of JavaScript which reports the user’s X/Y coordinates on the page.

Technically you still need JavaScript to gather these coordinates and do anything useful with them. But this snippet shows that you can design a pure CSS mouse tracking feature that follows the user’s every movement.

Can’t really think of a practical use for this but it could be fun on a prank site.

See the Pen Experimental pure CSS mouse tracking by Momcilo Popov (@Momciloo) on CodePen.

6. Flat Amusement Park

We’ve all seen vector icons and illustrations designed for the web. But what about full-page vector illustrations designed with raw CSS and SVG code?

This amusement park design is an experimental project that only works in SVG-supported browsers. Yet in those modern browsers it renders flawlessly and every element has a very realistic placement on the page.

The animations are certainly impressive but it’s the accuracy of the SVG elements that also grab my attention. In a few years we might find these kinds of illustrations on the web running solely in code without any image files.

See the Pen Flat design amusement park svg by Lina (animation powered by CSS) by Vladimir Gashenko (@gxash) on CodePen.

7. Möbius in 3D

Designing a repeating CSS animation like the Möbius strip concept is pretty tough. But add in some 3D elements and varying gradients? Now you’ve got a real challenge.

This snippet is quite impressive considering how smooth it looks and how little code is used (only 90 lines of CSS). With Haml you only need 6 lines of code to create the entire concept too.

I’ll admit this wouldn’t be super useful on a real website but it’s a testament to how much you can do with a few dozen lines of HTML and CSS.

See the Pen Möbius 6hedrons (pure CSS) by Ana Tudor (@thebabydino) on CodePen.

8. Custom Map Creator

After using this webapp for a few seconds you may feel confident that it runs on JavaScript. The dynamic behaviors like 3D rotation and terrain placement are all signs of a sweet JS webapp.

But this map creator UI by Vincent Durand is actually 100% pure CSS. The arrows for rotation, the rotation effect itself, and all the click-to-place features run on CSS.

It’s worth mentioning how this entire concept is rendered using 3D cubes too. The blocks themselves work as 3D elements and you can rotate the cubes just by hovering.

No doubt one of the craziest uses for CSS I’ve seen in a long time.

See the Pen Full CSS Map creator by Vincent Durand (@onediv) on CodePen.

9. Pure CSS iOS 7 Icons

This project’s a little less interactive but still just as breathtaking. Developer Peter Schmiz recreated all of the main iOS 7 app icons using pure HTML and CSS.

None of these icons use any SVGs or image files. Every element in each icon is hard coded into HTML with a span/div element, then styled using CSS. The craziest part is how accurate these are!

The full set includes 22 icons and they’re all pretty spot on. I’m most impressed with the attention to detail for icons like Maps and Weather. Just more proof that with enough time and patience you can pretty much design anything in CSS.

See the Pen iOS 7 icons with pure CSS by Peter Schmiz (@peterschmiz) on CodePen.

10. Single-Element Slack Loader

Re-creating the Slack loading animation with CSS3 is definitely impressive. But this snippet recreates the Slack loader with just a single element on the page. That’s what I call dedication.

The total CSS count for this snippet is just over 100 lines which includes the Slack logo colors and the animation effects.

I can’t say if this idea would work for other branded loading icons but I’m certainly impressed with this one.

See the Pen Single element Slack loader by CrocoDillon (@CrocoDillon) on CodePen.

11. Animated 3D Bar Charts

You’ll find dozens of custom 3D bar designs in CodePen all with their own animations. But these 3D bars by Rafael González stand out for all the other modern CSS bar graphs.

Each of these charts run on flexbox for containers so they’ll auto-size depending on how many bars you add and how large the container is. Plus each bar chart animates when it slides into view, all of which is controlled through pure CSS.

And since each bar’s size runs in em’s you can adjust every single bar to scale naturally based on browser font sizes. A nifty example proving that modern CSS is a whole lot more flexible than ever before.

See the Pen Pure CSS Bars by Rafael González (@rgg) on CodePen.

FREETER PRO: Organize Your Work with this Productivity App – only $14!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2017/09/11-experimental-css-projects-thatll-blow-your-mind/

Wednesday 27 September 2017

Getting Started With Free Vector App Gravit

Free stuff! Get your free stuff here! Well, it’s a free vector editor, anyway. We like those, right? To be more specific, I am talking about Gravit. Like I said, it’s free, it always will be, and it has a little something for most people. Plus, it has a version for just about every desktop OS (including Linux and Chrome OS. It has a browser version. Android and iPad versions are coming. It even has a simpler version for total beginners called Klex, which is a bit like Canva.

We’ve mentioned it a couple of times here on WDD, but we’ve never examined it in any sort of depth. Well version 3.2 has just been released, so it’s time to remedy that. Here it is, our introduction to Gravit Designer:

Standard features

It’s a vector editor. It’s got your pen and pencil line-drawing tools. It has shapes, symbols, and boolean operations. You can make multi-page documents. Export your images to all of the standard formats, such as PDF, SVG, JPEG, PNG, etc. Oh, and you can export to Sketch.

Now, most decent vector editors support CMYK, but Gravit lays claim to:

The first engine that fully supports CMYK rendering in the browser…

So yeah, you can do print work in the browser, if you want to.

Standout features

It’s free. Have I mentioned that, yet?

Free cloud storage: the cloud storage is accessible from both the web and desktop versions of the app, so it’s perfect for constantly-mobile designers. The only real downsides are that there currently doesn’t seem to be a way to share documents on your corner of the cloud with others. Oh, and every system is vulnerable, so if you’re making classified vector drawings, maybe just leave them on your hard drive.

Effects: Basically layer styles and basic filters, but for individual objects, and groups of objects. You can’t apply effects to entire layers, so they’re used purely for organization and easier object manipulation.

Presentations: You can take any multi-page document, and play it as a presentation. Just design your pages and go.

Libraries: You can’t make your own libraries of shapes, yet, but it comes with some built in to make things easier on beginners. There are icons, emojis, some clip art

Anchors: Anchors are a simple way of creating responsive graphics. I wouldn’t try designing a whole responsive site layout with them, but if you have to make graphics for, say, a variety of social media channels, Gravit will work quite nicely. This is actually the intended use case.

Interface

Well it wouldn’t be a proper introduction unless we gave you a head start with the interface. Gravit’s UI is not overly complicated, but time is money. Oh, and note that you can change your theme in the settings menu. I’m actually partial to the “light” theme.

On first running the app, you’ll be presented with a screen that’s supposed to get you started fast. It should be noted that there are a number of graphical templates for various uses, including website graphics, social media posts, presentations, posters, and more.

Standard tools are all located in the top toolbar. This is where you’ll switch between select tools, drawing tools, shape tools, object arrangement functions, and more. It’s the obvious stuff. It feels a bit empty for now, when the window is full screen at 1080p, but you can do a lot with the tools provided. The left sidebar is where you can manage your pages and layers, access the libraries and some handy tutorials on the app’s basic functions.

The sidebar on the right is contextual. Depending on what tool and/or object you select, everything changes. This is where you’ll adjust settings, input precise pixel measurements for objects, and all that sort of thing.

The contextual sidebar is also where you’re going to find all of the available object effects. You’ll only see options like Blur, Color Adjust, Drop Shadow, and Inner Shadow to start with. But don’t stop there; click that “More” option. There are quite a few complex and artistic filters and effects to be found.

You’ll also find the Anchor options here. As previously mentioned, these options can be used to “anchor” any object relevant to its position on the page, or in relation to a parent object.

Using the cloud functionality is simple enough. You can save files to the cloud, open them from the cloud, and organize them with folders. It’s fairly bare-bones for now, but it works. For a single user, it works perfectly well enough.

Conclusion

This app can absolutely do some awesome things in the hands of a professional; but illustrators will most likely want to stick with whatever paid app they’re using. It can do a lot, but it can’t do everything Illustrator can to make your workflow easier, for example.

On the other hand, Gravit is a great option for beginners, and web designers with limited vector graphics needs. Just need to whip up a quick banner? This app has you covered with templates to get you started, and enough complex functionality to let designers flex their creative muscles. On top of that, it’s great for anyone who does a lot of design work on the go.

1,300+ Premium Logo Templates: Vintage, Modern & More – only $14!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2017/09/getting-started-with-free-vector-app-gravit/

Tuesday 26 September 2017

Will Gutenberg Kill the Page Builder Industry?

The WordPress content management system has built quite an empire for itself, with a community of passionate fans that help push it to new heights. It’s the customizability of the platform that has everyone so excited about the possibilities, and the fact that WordPress powers over 75 million websites (or 28.5% of the internet) means that the possibilities are all but endless. New plugins, themes, and versions of the WordPress software are released on a regular basis.

But WordPress isn’t without its challenges and deficiencies, which the active WordPress community is vocal about calling to the light. To give a few examples, there’s the fact that you can’t duplicate blog posts and the fact that the visual editor hasn’t been updated in a long time.

The funny and awesome thing about the WordPress community is that when they find a problem, they don’t wait for the official fix. WordPress is an open source software program, which empowers members of the community to create all of the functionality they need on their own. The result? Plugins like Duplicate Post, which allow you to duplicate your posts, and Beaver Builder and Divi, which are WYSIWYG page builders that make it easy to edit content on a page and see the changes in real-time.

In June 2017, WordPress founding developer Matt Mullenweg announced on his personal site that he and other contributors have been working on the update to the visual editor that would be included in the core as part of WordPress 5.0. It was to be called Gutenberg.

What is Gutenberg?

Gutenberg is a take on the new editor for WordPress. It is named after Johannes Gutenberg, who is credited with popularizing moving type. (As a mini history lesson, moveable type was actually invented in China by Bi Sheng.)

The current visual editor requires the knowledge of shortcodes and HTML for full functionality, and was really only ever a partial WYSIWYG editor. With Gutenberg, WordPress core contributors had the goal of making things easier for users through the use of “little blocks”, or small sections that you can edit, one at a time, so that it isn’t overwhelming to make changes that could affect the entire page as a whole.

It’s been said that Gutenberg was created with functionality similar to Medium in mind, allowing the user to easily edit these blocks as changes are needed. The blocks can be moved up and down or deleted, as with other popular page builders on the market. Importantly, this block feature scales well with mobile.

For WordPress users that are used to the text editor, you can switch between the visual and text editor by using drop down menu located at the top left of the page. However, as you can probably imagine, switching to the new text editor adds more clutter to work around.

Here’s the official example of the front-end results of using Gutenberg’s editor.

The Gutenberg Plugin

According to Matt Mullenweg on his website, the motivation behind the Gutenberg plugin is:

Theme developers won’t need to bundle tons of plugins or create their own page builders. There’ll be a standard, portable way to create rich layouts for posts and guide people setup right in the interface, no 20-step tutorials or long videos needed. Every theme will be able to compete with multi-functional premium themes without locking users into a single theme or compromising their experience.

Gutenberg is currently in the beta testing phase. The current iteration will work for WordPress version 4.8 and above. As of this writing, Gutenberg is offered as a plugin, but developers are working hard to ensure that it will be ready to be included in the next core WordPress 4.9 update.

Being perhaps a bit more realistic, Gutenberg likely won’t be included in the WordPress core code until version 5.0 is released. Matt Mullenweg is hoping to get 100,000 active installs for the current plugin, and is actively encouraging people to leave all feedback on the WordPress support forum. There’s also the new challenge of abandoning React and having to rewrite the Gutenberg plugin because of a challenging patents clause.

Since being offered to the public, as of this writing, Gutenberg has 2,000+ active installs and a 2.5 star rating. It’s safe to say that there’s a long way to go for Mullenweg to hit his desired numbers, and to win more of the WordPress community over to Gutenberg.

What Gutenberg Looks Like in Action

If you want to test out Gutenberg, it is recommended to use a test site or using your host’s staging environment. When Gutenberg is installed on WordPress, the options under each post will look like this:

Gutenberg still hasn’t replaced the ‘Edit’ button, so users can test the difference between how the two work. Gutenberg also adds a new option on the sidebar menu, which allows you to try a demo and includes the ability to create a new post.

Gutenberg has the ability to switch between the visual editor mode and Text Editor (code/HTML). There are HTML comments at the beginning and end of each text block, which allow you to create text blocks directly from the text editor if you’re not used to the visual mode.

This feature represents a significant and important change over the typical page builder. With most page builders, you essentially have to rebuild each page if you switch to a new theme or design incompatible with the page builder. With Gutenberg, reverting blocks to HTML is a standard option that reduces work over the long term.

Gutenberg: The Bad

The 2.5-star rating on the Gutenberg plugin demonstrates that a lot of people aren’t happy with it quite yet. Here’s a sampling from reviews so far:

Gutenberg will make copy-pasting difficult
Changing a line of text into a header will take two actions instead of one
Media handling isn’t that good: image editing is limited and video embedding isn’t that good
Makes WordPress more complicated than it has to be
Disappointing page and post editing capabilities

There are also a lot of things about Gutenberg that as of yet do not make sense, such as:

How will the drop cap function be needed in blocks of text?
What is the point of the gear in the top-right corner of every block?
Why did they bother with the Latest Posts widget?

Hopefully by the time Gutenberg is included in the core, these issues will have been worked out.

Gutenberg: The Good

Though the WordPress community as a whole seems to have a major vendetta against Gutenberg, reviews aren’t all bad.

First off, people appreciate that it’s an attempt at distraction-free writing. If you put the current visual editor and Gutenberg side by side, you’ll see that Gutenberg has more physical space for writing. In general, users believe that it’s a good move as it’s a step towards the next evolution of WordPress. Gutenberg’s functionality is better geared to the beginner than the current visual editor.

Good reviews of the Gutenberg plugin say:

It is good for building blocks and for block editing
Makes tables and lists easy to make and manage

Zack Katz of GravityView led the keynote at WordCamp Denver this year, with the topic “The Future of WordPress”. His presentation brought up this interesting consideration:

Gutenberg is an important conceptual step forward for WordPress. Gutenberg enables WordPress to build content layouts, not just write articles. It is one of many transitions happening in WordPress toward a more simplified user experience.

Although Gutenberg is still in beta, and has only had 2,000 active installs, there’s certainly a lot of room for improvement. At the time of writing, there are only 139 reviews, which represents a very small percentage of users.

How Gutenberg is Going to Affect Page Builder Plugins

Gutenberg plugin early reviewers think that Gutenberg should be offered as a plugin only, and not as an innate WordPress theme feature. Should WordPress make Gutenberg an integrated feature, WordPress users will be divided.

Should WordPress make the necessary improvements to Gutenberg, it will challenge the existing page builders and eliminate the need for them. After all, why pay extra or take the time to learn something new with functionality that will likely become innate to WordPress?

Furthermore, as discussed earlier, one of the main issues with page builder plugins right now is that if you want to install a new theme from a different provider, you have to completely rebuild pages if you don’t continue to use the same page builder.

Another segment of WordPress users will probably complain, because they like the flexibility WordPress brings, which includes the choice to use plugins that they’re already used to. At any rate, it will be interesting to see how page builders adapt and create solutions, perhaps focusing on the unique functionalities that they’ve built out over time.

Will Gutenberg Kill the Page Builder Industry?

The idea behind Gutenberg is pure, starting from a clamoring of WordPress users that called for an update on the CMS’s outdated visual editor. However, since being announced, Gutenberg has received a number of mixed reviews—mostly negative, with many people calling for it to be offered as an optional plugin instead of a core part of the new WordPress update.

Gutenberg is still new and has plenty of room to improve because of it’s nature as a work in progress. The implications for the page builder industry have yet to be fully realized, but if it ends up being included as part of the core update, they should definitely be scared for their futures.

Swift Page Layout and Desktop Publisher for Mac – only $12!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2017/09/will-gutenberg-kill-the-page-builder-industry/

Monday 25 September 2017

When Slower UX is Better UX

When it comes to technology, faster isn’t always better.

It’s true that 47 percent of people want web pages to load in two seconds or less (and 40 percent abandon sites that take three seconds to load). But when load times drop significantly below that two-second threshold, users start to get skeptical.

To understand why, put yourself in the shoes of someone checking his credit score. In the past, he may have spent hours on the phone to get even one bureau’s credit report. Now, using an app, he can get all three reports in mere seconds with just a few taps.

Yes, the app is fast, and yes, from an objective perspective, it’s user-friendly. Its designers clearly did their homework. But does he trust the app’s results? Is it a scam? Did the program really gather all three reports, check them for errors, and present them in a matter of seconds?

No way, he might think. Given his past experience, he’d be perfectly reasonable in thinking that the app couldn’t possibly have done it that quickly.

When Slower Software Works

In most cases, a speedy user experience makes sense. Optimization is important, and frankly, most sites need more of it, not less.

But there are certain situations in which a slower UX can actually increase user trust and engagement. Consider slowing your software in order to:

1. Create Security Theater

When you fly, the Transportation Security Administration’s job isn’t just to make you safer; it’s also to make you feel safer. This same labor of illusion is what made you confident when filing your taxes with TurboTax earlier this year. Intuit created fake animated loading bars that show that it triple-checking your returns for errors even though it actually does so along the way.

Slowing down this stressful process tells users that TurboTax is working hard for them and that they can trust it with sensitive information. Facebook provides random security checks for a similar reason: By drawing attention to something that’s already happening behind the scenes, Facebook gives users confidence that their data is secure.

When, exactly, should you provide a security-show slowdown? One might be in order if the user has provided sensitive information (such as a social security number or home address), paid money to use your service, or engaged deeply with it.

For example, imagine a home-finding startup. Rather than you doing the legwork of finding the perfect home, the startup’s app handles it for you. Because it costs money and requires personal information, it’s imperative that it slow the process down. In order to build trust, the app should explain why it needs your sensitive data, how it will use that information, and assure you that it will keep your information safe. A free messaging app, on the other hand, needs no such slowdown. Its goal is merely to gain and keep its users through a seamless experience with the least number of barriers.

2. Educate Users About Modern Tech Speeds

Thanks to Moore’s Law and the maturation of connected devices, many modern technology products are fast and efficient with little perceived latency. Mobile computing and network speeds are remarkably quick compared to even five years ago.

But with so many users accustomed to spotty internet service, old technologies, and buggy software, fast operating speeds can cause them to worry about whether your product is working correctly. Wells Fargo’s eye scan technology, for example, was so quick that users didn’t believe it was doing what it said it was. The developers artificially slowed the process by strategically including scanning and authenticating progress bars.

Slowing your product to match user expectations should, however, be a stopgap solution. Look for opportunities to educate users on today’s software speeds. Within the product itself, explain how your software is faster than ever.

Facebook, again, provides an illustrative example. Ever notice how it pushes temporary notifications into your newsfeed following a product update? Each update mentions how Facebook is constantly working hard to improve the platform’s speed.

In your own product, take it one step further and include a call to action to allow users to provide feedback. Have an FAQ ready (or, even better, live support) to respond to this feedback and help users understand what’s really happening behind the scenes of your software.

3. Work Within System Constraints

Keep in mind that not all devices are connected to fast internet providers. Your product’s users might be of modest means or live in rural areas, or your own server infrastructure might not be up to snuff.

Either way, progress indicators such as loading bars can remind users that your product is still working on their request. For example, FirstRand Bank Limited of South Africa baked an artificial progress bar into its web interface. Because its infrastructure is outdated and slow, information can’t be displayed as quickly as it could, say, in Wells Fargo’s app.

Again, consider the user’s experience. If you’re a FirstRand customer staring at a blank screen for 15 seconds after clicking a button, wouldn’t you try checking your connection and refreshing the request? Unfortunately, these actions only make the bottleneck worse.

A fake loading bar might not be the ideal solution, but it’s better than providing no feedback at all. Animation to show that your software is handling the user’s request provides relief for both your servers and your users.

Speeding Up or Slowing Down?

All this talk of slowing down software requires some historical context. System limitations and users’ past experiences may be slowing things down, but on the whole, technology is pushing toward faster user experiences.

The more time that elapses, the more long-term tech users we’ll have. The more long-term tech users become accustomed to instantaneous results, the less UX designers will need to slow down their technologies. The faster technologies work — and, importantly, work correctly — the more users will trust them. Meanwhile, younger generations without the preconceived notions of their parents will grow into adults who are accustomed to seamless technological experiences.

Older generations who aren’t comfortable with technology still exist, however, and two people of different demographics rarely have the same comfort levels with the same technologies. Today, intentionally slowing down certain product scenarios can help older users feel comfortable with what’s happening to their data.

When slow systems (by today’s standards) are gone and people are used to instantaneous results, how much systems reveal to us about their back-end operations may become a question of personal freedom. As humans, we want to feel in control. Choices are comforting.

Ultimately, speed is important, but so is matching users’ expectations. No matter how fast we move into the future, slowing down will never go out of style.

100’s of Spiritual, Magical Vector Illustrations, Backgrounds, Brushes & More – only $21!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2017/09/when-slower-ux-is-better-ux/

Sunday 24 September 2017

Popular Design News of the Week: September 18, 2017 – September 24, 2017

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.