Weglot Review: How to Quickly Create a Multilingual WordPress Site

Did you know that there are over 3 billion Internet users worldwide? And guess what – it’s a fairly good guess that not all of them speak the language you use on your WordPress site. So if you want to reach those markets, you need to translate your WordPress site. But translating your site is a time-consuming and expensive process,…. Continue Reading

The post Weglot Review: How to Quickly Create a Multilingual WordPress Site is written by Colin Newcomer and appeared first on WPKube.

Is Adobe Plotting the End of Web Designers?

Adobe is one of the most well-known software companies whose tools are used by numerous web designers. Many reading this article likely use or have used Adobe at some point in their careers. That’s why it’s not without irony that Adobe is now dabbling in a hush-hush project that seeks to automate many of the tasks that designers regularly do as part of their jobs.

Adobe’s new project relies on Sensei, its unified and AI and machine-learning framework. Later this month, at Adobe’s Sneaks competition, the new project is supposed to be officially unveiled. The point of the project is to harmonize graphic and web design and machine learning in a way that’s never been done before.

So does this possibly spell trouble for web designers who may be put out of work?

Well, that’s really science fiction at this point. However, it’s undoubtedly the implication of the unnamed project. While it’s only in prototype stage at press time, it could turn the graphic-design world on its head.

Adobe’s new tool will automatically analyze the situation and then make recommendations on design elements to the user

The goal of the new project, which will also integrate into Adobe’s Experience Manager CMS, is to make it more efficient for users at large enterprises to customize websites, according to Fast Company.

Here’s what that means, in practical terms, for web designers: Instead of the designer making the actual decisions on a site’s layout, colors, images, and image sizes, Adobe’s new tool will automatically analyze the situation and then make recommendations on design elements to the user. Fundamental image editing, such as cropping, is automated thanks to image-recognition technology; design recommendations are made by AI.

As you can see, no web designer would be needed anymore in this process.

The broader picture is, according to Adobe, something they’re calling “human-augmented” design.

Overall, Adobe wants to streamline the entire design process for clients of theirs who need to work on larger projects. The AI features both image-recognition aspects that instantly crop or in some way edit the images and more traditional components that depend on text metadata for design decisions.

While this Adobe project may seem unsettling to some web designers, there’s more to the story than meets the eye.

Machine learning, the basis of this Adobe project, is all about automating jobs that are dull and boring. No web designer who’s passionate about his or her career would ever call design by either of those pejoratives, and that’s the rub. Machine learning has huge limitations.

machine learning can’t be a stand-in for time-honored design

It’s ideal for analyzing big sets of data and spitting out recommendation after recommendation, but those recommendations have a tendency to be soulless. After all, as designers know, machine learning can’t be a stand-in for time-honored design attributes like taste, experience and an eye for design. All those things can’t be captured by machine learning.

While Adobe’s Sensei isn’t going to help steal any web designer’s job anytime soon, the company has nonetheless invested a lot of money into the intersection of design and machine learning, which is at the heart of this new project. Time will tell if it will indeed automate design in the future or simply be another of Adobe’s interesting experiments.

Source

9 ways to organize successful creative projects

Getting your project organized and easily manageable is always a challenge when working as a part of a team. The problem reaches a whole new level when it concerns a creative project. Creativity blossoms the most when it’s unlimited while collaborative projects crumble without rules.

So what to do with a creative agency project that requires teamwork and collaboration? Organization and leadership, if executed correctly, doesn’t have to affect the creative process. Here are nine practical tips to keep your designer team organized no matter the task at hand!

1. The Art of Prioritization

Some projects are more complex than others. To keep yourself from being overwhelmed, identify the most important tasks (your MITs) that need to be worked on before the project can go to the next level. The secret is to determine a limited (realistic) number of crucial tasks that need to be done and try to complete them first. Giving your team a realistic deadline will give each day a structure and a particular purpose. It’s a great way to slay a particularly big beast of a project, or finally, complete those little tasks that have been passed around the office like a hot potato and eventually forgotten.

Defining MITs will allow the designer team take charge of the day rather than just react to whatever is thrown at them.

2. Take Advantage of a Project Management Tool

The phrase ‘project management tool’ sounds like a drag but, in fact, can come in quite handy. There is no bigger time eater out there than using multiple communication tools, leaving little messages here and there and subsequently keeping some of the members of the team in the dark about the progress. Save your team time and hassle trying to figure out what needs to be done next, or where the project is headed. Actually, using a project management tools will give the green light to creativity through efficiency.

The trick lies in choosing a tool that works the best for you. Today, there are a plethora of software tools to choose from. Do a little bit of market research, try and experiment to find which project management tool is the right fit for your team.

3. Keep Everybody in the Loop

When it comes to achieving customer satisfaction in terms of design, information is the key. The common ‘less is more’ saying doesn’t work in this case. If you want the project to be done right and on time, give your team all the information you possibly can. This way your designers will not have to waste time verifying dates and demanding details.

Most importantly, give all the team members the same information! You will avoid a lot of conflicts and confusion. Put all the requirements, needs, rules and deadlines out there (by using an awesome management tool maybe) and the designer team will love you for it.

4. Allow for a Realistic Timeline

The customer is the king, and we are often drawn to do anything to please him or her. However, setting ridiculous, unrealistic deadlines for creative projects is not a way to go. Do not expect a great log or a mind-blowing website to be created in 24 hours. Simply put, creative teams need time to be creative, to brainstorm, sketch and design, to deliver their best. Rather than forcing your team work in crazy stressful conditions, teach your clients the value of time in creative projects.

5. Feedback is Key

Constructive feedback is key to design masterpieces. For feedback to take place, all members of your team must feel safe to express their opinions.

A leader of the project needs to be very clear and open about what they like and dislike about the proposed designs. On the other hand, the team members should feel free to offer their input and feel like they are being listened to. Successful feedback is all about respect and logical justification of your opinions. It’s an excellent way to avoid frustration within the team and keep the spirits and productivity up.

6. Standardize!

Standardization doesn’t sound creativity-friendly, but when imagination needs to be productive, it is the holy grail of effectiveness. Messy interactions, inconsistent work styles and team members working from remote locations can wrap the creative work and project advancement!

Standardizing file names and process chains will enable quick and frictionless interactions and creative exploration. Adhering to a particular naming convention and workflow will help every member of the team locate the files easily and complete its part of the job without giving in to the chaos.

7. Bundle Related Tasks

Bundling similar or related tasks together is guaranteed recipe for efficiency, especially so if it comes to critical yet very tedious routine tasks that can disturb creative workflow. Whether it’s taking care of social media or getting down to the recruiting tasks, allocate 20-30 minutes, get it off your mind and tackle all these tasks together. You will be left free to concentrate on the more important design tasks at hand, free of distractions.

8. Let designers maximize high-energy time

Each creative person works differently. Some prefer to work late, well into the night, other are at their best in those fleeting moments of clarity early in the morning. The best creative work rarely happens on the “beloved” nine to five schedule. If you can afford it, let the members of your team profit from their personal high-energy and high-creativity times. Encourage them to take notes of their rhythm, observe how they work and schedule the most challenging tasks when they are at their peak. Although a bit less structured, this approach is likely to improve the quality of work.

9. Use Shortcuts

To be more precise, use graphic software shortcuts. The trick lies in customizing the software workspace to reflect and enable the type of design work your team does on a regular basis. One of the greatest time-savers is creating reusable templates for reoccurring types of projects and building a library of files for most used graphic resources such as icons, fonts or textures.

To wrap things up

When a team works smoothly, it reflects on the final results. Thus, keeping your designer team happy yet structured is imperative to the success of any creative agency. Get yourself a project management tool and apply any of the tips above that caught your attention. Nonetheless, the best way to improve your workflow is to ask your team members about the most upsetting issues and ask for them for ideas!

Source

What’s New for Designers, March 2017

From new tools to code snippets to typefaces that will make your design life better, this month’s design newbies are a lot of fun to play around with. Our favorites include a task management app that’s free, a new website builder that is incredibly easy to use and a tool that can help you clean up all those old forks on GitHub.

Almost everything on the list this month is free, with a few high-value paid apps and tools. They’re sure to be useful to designers and developers, from beginners to experts.

If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered!

Taskade

Taskade is a simple way to make lists, take notes and organize your tasks. You can then instantly share them with others, no signups needed. The app’s motto is to “make lists, share simply.” It also includes a Google Chrome Extension for even easier use.

Slides 3

Slides 3 is a website building tool that makes it easy to create a good-looking design using a robust kit of modular parts. Slides 3 includes more than 180 customized elements so that you can build a website that’s uniquely yours. And every slide and component comes with great animations to bring your design to life. You can build the entire side online in the generator app and it works for any type of website project.

Clean My Forks

Clean My Forks is a free tool that will help you clean up all those old forks on GitHub. Deleting them manually can be a real pain and this tool can remove clutter from your profile.

Ratio Buddy

Get perfect proportions every time with this ratio tool that does all the math and builds all the code for you. Ratio Buddy even shows you what the aspect ratio will look like on screen so you can figure out if you have it right (or not).

xvg

xvg is a Chrome extension for debugging SVG paths by converting them to outlines and displaying anchors, control points, handles and arc ellipses.

Know It All

Know It All will test your web design knowledge and is a database of answers about development questions. It’s a helpful tool and challenges you to know it all!

fman

fman is a tool designed to help you keep up with all your files. It’s like GoTo on Steroids, helping you jump through directories and find folders as it learns popular locations and suggests them back. It works on Windows, OS X and Linux.

WebGradients

Gradients are back and gaining popularity in web design again. This website gives you so many gradient options to explore with a free collection of 180 linear gradients that you can use as content backdrops in any part of your website. Just copy CSS3 cross browser code and use it. There are also PNG versions of each gradient and packs for Sketch and Photoshop.

ColorMe

ColorMe is an easy way to visualize the CSS color function. Enter the color you want to use with common color codes and check adjusters to see how it will look with different settings, and get the code to make the changes in your design.

Your Perfect Cards!

This free download will help you create HTML/CSS animated cards with microinteractions – a super trend design element.

Vaunt

Do you ever have that moment where you just need to know what a color is to use it in a project? Vaunt is an app that extracts the dominant colors from any image.

It uses a clustering algorithm to determine which colors from an image are dominant. The results show the domain color and close variants to help you create exactly the color palette you want. Then you can download swatches in any color format you need. (And it’s a free app.)

Outdoor Advertising Screen Mockup

Sometimes web design projects go beyond the screen and you have to promote a new website launch or design. That’s where a good mockup comes in, such as this option to create an easy design for an outdoor screen. The photo realistic mockup comes as a fully-layers PSD file that’s easy to use and can help others see how a design will look in a realistic environment.

Jump

Jump helps you navigate your file system faster by learning your habits. It integrates itself into your shell and builds a database of the directories you use most. That way you can “jump” around projects using just a fuzzy search. (It even accounts for typos!)

Vivus Instant

Vivus Instant makes stroke drawing animations without JavaScript. You just drag and drop a stroke-based SVG in the tool and customize the options. You’ll get an exportable CSS animated file to use in projects.

HDR Effect Photoshop Action

Create an HDR photo effect in one click with a Photoshop action that will help improve the look of your images. The presets let you tone map HDR photos with professional results and significantly improve any photo, reproduce photos in higher details, contrast scenes and light exposures by increasing luminosity, saturation, strength, etc. And it is designed in a way that anyone can use.

The App Launch Checklist

Are you ready to launch your first app? Don’t fall into traps that commonly happen during the launch process. This tool allows you to create a customized launch plan that you can share and save so that everything is in one place. (Plus all the steps are included to make building your checklist super simple.)

Free Apple Mockups

There’s nothing easier than having a few great mockups at your fingertips to show off projects to your team or prospective clients. This kit of Apple mockups includes PSD files for iPhone, iPad and Mac Desktop designs. Plus, this kit is easy to edit and use.

Black Corporate Mockups

The light, white mockup style isn’t for everyone, so this black corporate kit might be a better option. It includes PSD mockups for an iPhone, Apple Watch and other branded elements such as pens, flash drives and business cards.

F37 Foundry

F37 Foundry is a new type foundry and the website tools allow designers to take typefaces for a test drive right in a Chrome or Safari browser. You can move, rotate and resize text, see it in different color and test kerning and tracking before buying a new typeface.

Reflect

Reflect makes it easy to turn data into visual elements for analytics, reporting or storytelling. You can integrate data with an API or design interactive content without coding.

Wildfire

The Wildfire extension for Google Chrome allows you to record actions on the pages you visit, then replay those actions using a simulator. When actions are recorded or simulated, it produces a log which can be reviewed. Use the Workflow Editor to manipulate the behavior of the simulation.

Images To Video

Images To Video is a simple tool that converts a group of still images into an mp4 animated video. You can include up to 10 images and create a simple movie for your website design or social media.

EasyQA

The quality check part of web development is often a chore. EasyQA is a test management tool that helps plan and execute testing, report issues and find crashes and manage the team that’s doing the work. The software package is pretty robust and is free for teams of less than five users.

Init.ai

Init.ai helps you build a better chatbot. The tool, which is still in beta, helps you better automate conversations, analyze them for actionable insights and assist sales and support staff to better communicate with users. The beta version is free to test and is a good place to start if chatbots are a part of your business plan.

Photoshop iPad Scroll Animation

This is a tutorial and mockup in one. The PSD file comes with all the layers and editing that you need to create a cool scroll animation for an iPad, but it also includes video instruction to help you learn the technique on your own.

Brand New

Brand New, the blog that tracks on logo and design updates got a facelift. The new design is simple and makes it easier to see before and after posts at a glance. This is a tool that you should be tracking if you aren’t already.

Oceanside Typewriter

Oceanside Typewriter is a simple typeface with a nostalgic feel. It includes upper- and lowercase character sets and numerals.

Social Circles

Social Circles is a great glyph typeface with circle-based icons for popular social media networks. Icon styles include outline and reverse.

Dionisia

Dionisia is a fun art deco type typeface in all uppercase letters for display use. It also includes a few fun alternates such as the underlined “o” in the image.

Source

WordPress SEO by Yoast vs All in One SEO Pack: Which is the Best SEO plugin?

Fact: Every new WordPress installation requires an SEO plugin to improve search engine rankings. Yes, WordPress already has SEO tools pre-installed, but when you use a plugin it allows you to take full control over what’s being shown to the search engines, and you’re more likely to understand how your articles and website pages look to the search engines. A…. Continue Reading

The post WordPress SEO by Yoast vs All in One SEO Pack: Which is the Best SEO plugin? is written by Brenda Barron and appeared first on WPKube.

Popular design news of the week: March 6, 2017 – March 12, 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.

Design Better Cards

 

The Best Responsive Web Design Frameworks of 2017

 

Hero Images in Web Design: Ideas, Examples & Inspiration

 

The 15 Best Free Photoshop Scripts

 

Amazing Fonts for 2017

 

Realising You Suck at Design

 

SVG Icons for Popular Brands, 100’s to Pick from

 

Why I Left Mac for Windows: Apple has Given up

 

What Web Designers Can Learn from Web Developers

 

6 Lessons I Learned in my First 6 Months Designing For IBM

 

15 Best JavaScript Form Validation Libraries – Dev Code Geek

 

5 Insights About the Current State of Design

 

Zara: A Usability Case Study

 

MIT Technology Review’s 10 Breakthrough Technologies of 2017

 

The 18 Best Tools for Online Collaboration

 

Inbox of Forgotten Emails

 

The Design of the Dark Side – UX Dark Patterns

 

The 100 Best Design Blogs to Follow

 

Promising Startups You’ve Never Heard of

 

10 Steps to Intuitive Online Forms

 

As a Designer I Want Better Release Notes

 

Refined and Effective Graphic Design Isn’t Free

 

Kite Compositor: A Powerful Animation and Prototyping Application for Mac & iOS

 

Tips for Better Website Redesigns

 

The Incredible Growth of the Internet Over the Past Five Years – Explained in Detail

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Source

Comics of the week #382

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…

I’m only the designer

Skill sharing

 

Guilt feelings

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

Source

Browser Watch, March 2017

Welcome to another edition of Browser Watch, the regular feature that runs down the latest news and developments among all the most popular and up-and-coming browsers available. Whether you’re a designer, developer or both, you’ll always be kept up to date on everything that’s going in the browser world.

Material Design Extensions Page Part of Latest Chrome Development Release

Google Chrome’s extensions page hasn’t been altered in a while, but that’s recently changed. In essence, the extensions page received a grid-based redesign, so users have an easier time being able to spot at a glance what the extensions have been enabled. Tabs on the left side are for Chrome apps and extensions; the items inside can now be either enabled or disabled courtesy of a Material Design-inspired on/off toggle. To see the extensions page, users will have to activate a flag to see it inside the development build.

Apple Increasing Malware Protection on Chrome for macOS

In a bid to improve security, Apple is improving protection against malware in Chrome; this malware preys on macOS devices on the web. Apple has a two-part plan to combat this malware against macOS users. First, the company recently released the Chrome Settings API for Mac, which came with Chrome 56. Second, Apple is relying on Google’s Safe Browsing Technology to show in-browser alerts when a user wants to visit a known website with questionable security.

Safari Technology Preview 25 Released

Apple has released Safari Technology Preview 25 that comes with bug fixes and improvements to known features. At the one-year anniversary mark, Safari Technology Preview’s latest version includes improvements to:

  • Resource Timing
  • Rendering
  • Media
  • CSS
  • WebCrypto
  • User Timing
  • Web API
  • Web Inspector

One of the biggest changes is that Resource Timing is now going to be available by default.

(Safari Technology Preview was intended by Apple to be a place where it could experiment with and test certain features that could eventually be introduced in future, wide releases of Safari.)

Komando.com Says Unheard of Dolphin Browser Rivals Chrome and Firefox

Even if you’re using popular browsers’ mobile versions, chances are that they still take a backseat to their desktop versions when it comes to performance. According to a piece on Komando.com, the Dolphin browser gives both Chrome and Firefox a run for their money when it comes to a mobile-browsing experience. Unlike all other browsers, the Dolphin was specifically designed from its inception to tweak the user experience during mobile browsing.

Apple Safari…Going the Way of Internet Explorer?

While Apple still supports its browser—unlike Internet Explorer, on which Microsoft pulled the plug on a few years ago—reports indicate that Safari is shedding users at an alarming rate. According to a recent report, Safari has lost a significant 19% of its users in only the past two years, which isn’t good if Apple wants Safari to remain competitive with Chrome, Firefox and even upstarts like Vivaldi.

Firefox Debuts Support for WebAssembly

Mozilla’s latest update, Firefox 52, is a one-of-a-kind browser: It is the first browser to support something called WebAssembly, an burgeoning standard that saw its roots in a Mozilla research project. WebAssembly should please video-game fans, as it allows sophisticated apps, such as games, to run faster than ever before inside a web browser. WebAssembly is expected to enable apps that have typically been too complicated to properly run in browsers. That would include 3D video games and scientific visualization, among others.

Brave, the Ad-Blocking Browser, Now Syncs Between Desktops

The new browser from ex-Mozilla CEO Brendan Eich is known for ad-blocking, but now, it’s also one step closer to having another feature that virtually all browsers offer as standard: the ability to sync between computers. Note that users still won’t be able to sync between all devices (read: mobile)—just between desktops. This should help drive a few more users to Brave, as sync support is at least a promising step in the right direction (mobile sync is apparently in the works).

Opera Browser and Instant Page Loading

Instant page loading sounds intriguing, you have to admit. That’s just what’s new in Opera’s latest release, Opera 43. Here’s how instant page loading works: It uses predictive technology to start to load a site in the background prior to the user finishing putting the entire URL into the address bar. This version of Opera is also the fastest yet. This is all part of Opera’s goal to make the browser smarter over time by understanding what sites are attached to URL inputs.

Security Flaw in Microsoft Edge and Internet Explorer?

This time, it’s Google warning users about a serious security flaw in both Edge and Internet Explorer. The security problem pertains to how both of the browsers end up formatting webpages. Ivan Fratric, a well-known Google researcher, initially discovered the flaw late last year, but, unfortunately, Microsoft has not yet patched it. Further, the company hasn’t announced when it’s going to patch the flaw (if at all), thereby leaving millions of users around the globe vulnerable.

Chrome Is Going to Support Virtual Reality

Google is looking to push and surpass the limits of its leading browser by making the newest version of its browser support virtual reality on the web. As a result, it’ll be possible for users to look at virtual reality on any device as well as over any platform. Of course, at the moment, only a handful of sites actually provide virtual-reality content for users. Google, unsurprisingly, is working hard to up this number, just in time for its support of VR on the web.

Source

7 Design Myths That Will Wreck Your Site

When I was a junior designer I made plenty of mistakes. I believed false assumptions mostly because I did not have the experience yet to know better. I still don’t know it all. But, I am always eager to learn new things about design and to see which preconceived notions are accurate or a complete myth. That’s how this post came about. I want to address seven common design myths which I still see influencing design decisions.

Unfortunately, false design myths like these to lead to poorer quality design and poorer experiences for end users. We can avoid this by making smarter design decisions to improve the quality of our designs.

1. The homepage is your most important page

For a long time, people believed the homepage was the most important page. Way back when, it may have been the case when the homepage served as the main directory in getting around to the rest of the pages. It’s no longer the case. The way we browse, and even find web pages, has changed dramatically. Often, visitors will land on a web page from a direct link to a product page, missing the home page altogether. This direct access to other pages is largely due to SEO results or links shared on social media. 

Today, home pages serve one main purpose: to get you to the content, whatever it may be. For websites that are constantly filled with new content such as BuzzFeed or Darling Magazine, the home page serves to show the top stories. There are also websites that show off products or services, like Maison Deux. In both of those cases, the user is bound to enter the content specific page because they are not there for the homepage, the directory, they are there to consume information or make purchases. Next, there are services like Mailchimp or InVision where users are interested in using web apps instead. There are plenty of websites out there whose homepage you don’t see as a logged in users, such as Facebook.

Viewing many design gallery sites such as Dribbble, Behance or Awwwards by the sheer number of showings of creative and amazing home pages. There is nothing wrong with having a great looking and well functioning homepage. However, let’s get one thing straight: compared to other pages on a website, a homepage is not as important. 

2. Minimalism is the only way to achieve simplicity

Minimalism is a style, while simplicity is about the overall feel and functionality of an application or website. A complicated and extensive design can be made simple. The goal of simplicity isn’t to have the minimal amount of things such as steps, UI elements or interactions.

Steven Sinofsky put it well. He explains that minimalist design decreases the visual surface of a design and its experience, whereas simple design—which he calls frictionless design—decreases the energy required for the experience.

Let’s take for instance the UX of a form with no labels but only placeholder text. We all know this infamous pattern. So although having less visual elements, in this case missing a label, is more minimal the interaction is often confusing for users filling out the input. The interaction is no longer simple. Adding the extra UI element, the label, even providing an example outside of the placeholder, adds to the quantity of UI elements. But, the interaction becomes simpler, easier and more intuitive for the users. That’s a great differentiation between minimalism and simplicity. They are not one and the same.

3. Limit the number of navigational choices

Many people misinterpret George Miller’s theory that the human minds can keep track of 7 (plus or minus 2) bits of information at a time. His theory still holds true but it’s exclusive to the human cognitive condition regarding short term memory. Somehow this theory made its way into web design, specifically to navigation and menus.

Additionally, there is research on limiting the number of choices, which was popularized by Barry Schwartz. Barry Schwartz’s research was referring to choices in product. In his research, Schwartz was referring to jams where the customers had a harder time picking, committing and therefore purchasing a jam if there were a multitude of options. The customers were purchasing jams at a significantly higher rate if they were presented with just a few choices. This can apply to any other product like cars, phones or online subscriptions. They key here is still products.

The job of a navigation is to help a visitor explore what a website has to offer.

Neither of those two pieces of research has anything to do with navigation. The job of a navigation is to help a visitor explore what a website has to offer. Back in 2006, Jared Spool wrote on the topic of link-rich websites which are sites filled with many links and pages. In the article he uses an old version of the Dove website to demonstrate his point, and although the website has changed, the conclusion still stands. Dove’s sitemap was more usable to a visitor than their own homepage’s navigation. The reason for this is that is allowed anyone looking for a specific product to find the necessary product page.

Navigation can be large but still allow the user to browse to the product they are looking for. Good navigation won’t hide the multitude of pages. Instead, it will cluster and group them into similar categories to be findable by a visitor. Now, if the groups and clusters are poorly made that’s also not helpful to the user. The bottom line is, hiding pages from the navigation is not beneficial to the user.

4. Everything must be no more than three clicks away

On computer interactions, the rule is said to be three clicks but this rule has also been extended to mobile devices in the form of two taps. Multiple usability studies prove that this is bogus.

Visitors and users don’t care about the exact amount of clicks or taps. They care about obtaining the information they are looking for, they care about finishing the task they are doing. Additionally, it’s relevant to the user whether clicking through will get them to the desired information. If the user feels they won’t find what they need in their journey, they may leave without clicking just once even though the information might be revealed after a single click. Users will keep on going through as many as 25 clicks, as found by UIE, in order to complete their tasks. The UIE research also states the importance of user satisfaction is also irrelevant to the three click rule.

5. Mobile device users are always on the go and are always distracted

When speaking about mobile apps or responsive websites, both of these points are mentioned. First, mobile device users are presumed to be on the go. Second, they are also presumed to be distracted. Way too often, these two assumptions seem to go hand in hand with one another. Someone who is on the go is bound to be distracted. The fact of the matter is, neither is actually the case.

68% of mobile page views happened at home…mobile interactions such as reading articles or shopping, is mostly done at home

Let’s tackle the first assumption first. A 2012 Google study found out that majority of smartphones were used at home, 60% to be exact. Another study in 2012, this time by InsightsNow on behalf of AOL,  found that 68% of mobile page views happened at home. InsightsNow’s study excluded texting, calling and emailing. But, as you can imagine, playing games, browsing Tumblr or Facebook, and any other mobile interactions such as reading articles or shopping, is mostly done at home. Although we should still keep designing for on the go use, it’s not the primary way most of us use our mobile devices now.

Next is the assumption regarding distractions. Distractions are eminent everywhere, albeit it working, watching tv, driving or using a mobile device. That’s just a fact of life. Just because someone is using their smartphone instead of a desktop computer does not make them more distracted. I will point to the same 2012 Google study which found that while using a PC 67% of the time a user is also using another device compared to 57% while using a smartphone.

6. Good usability is good enough without aesthetics

Don Norman devotes a whole book to explain how emotions and design go hand in hand. That’s because while great usability may be a great start and it’s certainly necessary, it still may not actually be good enough. Don Norman’s book centers around emotional connections created through design. Positive emotions can be powerful in helping sell products. There are numerous studies to show that more attractive products appear to perform better than products with poorer designs. Not to mention that first impressions are excessively made through appearances.

More importantly, looks and design are often related to credibility. Stanford University’s Credibility Project proved just that. They presented people with websites to learn about the correlation of credibility. They found the 46% of people based the credibility of a website by its appearance. Emotional responses play a greater role in connecting with people than usability. Emotions are human while usability is technological. Therefore, great visual design and aesthetics is a competitive advantage and a differentiator within a marker. Ultimately aesthetics help enhance usability as mentioned in Don Norman’s book, Emotional Design.

7. Your users will tell you what they want

This one is my favorite. Asking your users for feedback is important. It’s equality important not to take their feedback literally. Noah J. Goldstein wrote:

people’s ability to understand the factors that affect their behavior is surprisingly poor.

And he couldn’t be more right. This type of thinking goes back to days of Henry Ford where he famously said: “If I had asked people what they wanted, they would have said faster horses.” That’s because people are bad at explaining their own behavior patterns, intentions, and behavior predictions. This phenomenon is also known as introspection illusion, in psychology. It’s okay, I’m bad at it too.

Another reason why listening blindly can lead to trouble is that people often speak only about the solution to the problem they might be facing. As a designer, I’m sure you’ve received design feedback such as “make the text bigger” with no explanation as to why. A client or a colleague might have a hard time reading the text with a smaller font or they might feel that the smaller font is less noticeable compared to everything else in the section’s design. The same goes for user feedback. Like I said, it’s important to listen to customers and users. But, it’s more important to get to the bottom of the problem first. Do further research based on user feedback, requests or complaints to figure out what the problem at hand might be, and solve it for that instead of their comments alone.

Conclusion

There are still many more design myths and assumptions out there. These are the seven most common ones I see other designers cling to, especially junior designers or design students. We’ve all been there—I’ve been there. It’s important to realize that these assumptions are baseless and be smart about them moving forward. Hopefully, exposing these seven will help you make better and smarter design choices.

Source

7 Secrets for Designing Great Forms

Almost every website design includes some type of form. From simple email address collection to sign up for a newsletter or notification to full payment collection forms, it is imperative that you design a form that’s easy to use and understand.

The standards of form design are evolving as well. While many forms used to include multiple columns and ask for lots of information, most best practices now suggest keeping forms as simple as possible. And there’s a lot to the design as well. A good form is scannable, doesn’t require a lot of typing and includes smart labeling and formatting to help users fill out forms correctly the first time.

Here are a few secrets to ensure you are designing a form that users actually fill out.

1. Make It Easy to Scan and Read

You know that users scan websites to glean information and determine what actions they will take or whether the content and design interests them or not. The same is true of forms. User should be able to tell what information is needed at a glance and provide a clear explanation of what the form is for and how to submit it.

A highly-scannable form includes the following:

  • Contrast: Text needs to be short and easy to read. Avoid lots of color and stick to traditional dark on light text-background combinations.
  • Grouping and space: Group information that’s similar on longer forms. When collecting payment information for example, group customer information, payment information and shipping information. Three shorter blocks are easier to digest than one long one. Use smart spacing to that labels are connected to the field they explain, rather than uniform spacing between text and field elements.
  • Clear finish/call to action: Make the button big and easy to see. The microcopy inside the button should tell users what will happen, such as “submit,” “pay now” or “proceed to next step.” Remember to close the feedback loop and let users know when a form is properly submitted.

2. Consider Floating Labels

There’s been a lot of debate about whether or not to use hint text inside form fields. The main problem is that too often this text doesn’t go away with a click and users have to actively delete it to start typing. That’s awkward.

Further, the Nielsen Norman Group found that blank fields can draw the eye and help users input information more clearly.

If you feel the need to use hints, consider an interactive solution—floating labels. Include your label information inside form fields so that it looks like placeholder text, but allow the text to animate and shift to the top left position once a user hovers over or clicks into the field. The label or hint never goes away and it does not get in the way of the user trying to fill out the form. (Plus the little animation is a fun surprise for users.)

3. Use Field Masks

Field masks can provide some of the same clues and form hints but without getting in the way of the usability. A field mask only appears once a user activates a field and provides an additional scanning clue as to what information is needed. The mask can assist the user further by automatically formatting information in an effort to avoid errors that will kick the form out on submission.

A good example of a field mask in action is with phone numbers. Consider the multiple format options:

  • (000) 000-0000
  • 000-000-0000
  • 0000000000

How does a user know which one will work? The form field will specify and adjust the format as a user types, so he or she does not have to think about it and only has to key in numbers. (This also saves the hassle of having to switch between keyboards on a mobile device.)

4. Make Forms Keyboard-Friendly

You have no way of knowing what type of device a user will encounter your form on, but it should be equally easy to fill out anyway. Consider all the different types of keyboards that could send information to the form and adjust fields to detect and use the appropriate option.

On desktops, users should be able to enter a form and fill out each field without having to click a mouse. Advance automatically from one field to the next upon completion or use tabs or enter to move around. W3.org has a solid set of keyboard recommendations for you to follow.

On mobile devices, match the keyboard type to the data required. If the input is for letters, bring up the alpha keyboard; for numbers, bring up the numeric option. From Google: “App users appreciate apps that provide an appropriate keyboard for text entry. Ensure that this is implemented consistently throughout the app rather than only for certain tasks but not others.”

5. Opt for Vertical Format

Vertical forms are easier for users than multiple column formats. To best practice rule is to ensure that all the fields can fit on the screen without scrolling in a top to bottom format.

The one exception is for super-short forms where a user only needs to enter an email address or name and email address. Two side-by-side columns followed by a call to action button can work well in this situation as long as the email box is long enough for users to see all the letters of their address.

Remember to order elements logically in a vertical form as well. If you are collecting first name, last name, email address, and hair color sequence them in that way.

6. Limit Typing

Use as many pre-fill solutions as possible with forms. Nothing is more delightful then going to add an address and after the first few taps, the Google API kicks in and suggests address options.

This does three things:

  • It makes it easier for users, particularly on mobile.
  • It helps limit the number of fields necessary.
  • It can help eliminate some user error, such as mistyping.

Consider the same thing with email addresses, such that users are given popular email domains after the @ symbol. When a user types in web@g …. the field automatically suggests web@gmail.com.

7. Keep It Short and Sweet

You are going to be tempted to ask users for a lot of information in forms. Resist the urge!

Only ask for vital information in forms. There’s a stronger likelihood that users will fill out forms that require less commitment. If you need more information later, you can then email them from your list as ask for additional details. (As someone who has already opted in, the user is more likely to engage with you for more at this time.)

Avoid optional fields. Don’t ask for redundant information. Don’t use multiple fields where you could use one (phone numbers for example).

Conclusion

Give users something in return for filling out a form. Make it fun or interesting. Thank the user.

Creating a form that’s easy to read and easy to use will increase your chances of collecting data and turning a website visitor into a repeat user.

Source