Adsense and AdWords – why use them?

Original Source: https://www.sitepoint.com/adsense-and-adwords-why-use-them/

Overview There are a lot of different ways that savvy people monetise the web, of which AdSense is only one. For perfect clarity, where we are talking ‘Adsense’ we’re really talking about Adsense for content, contextual ads on the Google Adsense network that that can be utilised on blogs, websites or any other web-based properties  […]

The post Adsense and AdWords – why use them? appeared first on SitePoint.

Collective #446

Original Source: http://feedproxy.google.com/~r/tympanus/~3/6clciyWLQ1M/

C446_WOTW

Inspirational Website of the Week: Robin Mastromarino

Some interesting distortion effects and a dynamic design. Our pick this week.

Get inspired

C446_HotJar

This content is sponsored via Syndicate Ads
See how people are really using your website

?Hotjar is everything your team needs to get ‘in-the-moment’ visual feedback and better understand how people are really using your site.

Try it free

C446_aijs

aijs.rocks

A curated collection of inspirational AI-powered JavaScript apps.

Check it out

C446_shimport

Shimport

An experimental shim for import and export that allows you to use JavaScript modules in all browsers.

Check it out

C446_cssgrid

Super-Powered Grid Components with CSS Custom Properties

Michelle Barker shows how to use CSS Grid with variables at a component level.

Read it

C446_mondrian

Piet Mondrian

A tutorial on how to code a nice recreation of a Mondrian-like art piece. By Tim Holman.

Read it

C446_talk

Solving Container Queries Today

A great talk by Greg Whitworth at CSS Day 2018.

Watch it

C446_dubai

The Fall of NeoDubai

An experimental WebGL cyberpunk 3D music clip made by Martin Laxenaire.

Check it out

C446_codesplitting

Reduce JavaScript Payloads with Code Splitting

An article by Jeremy Wagner and Addy Osmani where you can learn all about how code splitting can help with your site’s performance.

Check it out

C446_font

Free Font: Sanös

A beautiful handwritten brush font by WildOnes Design.

Get it

C446_PWA

Progressive Web-First Apps

Dion Almaer writes about why it makes sense to start with a PWA experience for your new idea.

Read it

C446_MIT

The MIT license (with personal exceptions)

Jamie Kyle’s modified MIT license that excludes certain companies.

Check it out

C446_GenArt

Why Love Generative Art?

A wonderful article on the beauty and importance of generative art. By Jason Bailey.

Read it

C446_rss

RSSHub

In case you didn’t know about it yet: RSSHub is a lightweight and extensible RSS feed aggregator that can generate feeds from pretty much anything.

Check it out

C446_editor

Tiptap

A renderless rich-text editor for Vue.js based on Prosemirror.

Check it out

C446_webgraphic

Web Graphic Experiments

In case you didn’t see them yet: All web graphic experiments by Keita Yamada in one place.

Check it out

C446_instruments

Magic Instruments

These instruments you can play with other people on the web. By Sara Viera.

Check it out

C446_formprogr

Progressive Disclosure with CSS

Ricardo Prieto shows how to make a CSS-powered form with progressive disclosure.

Read it

C446_forms

Best Practices For Mobile Form Design

Nick Babich offers useful advice for better mobile form design.

Read it

C446_spacing

Create Your Design System, Part 4: Spacing

Sebastiano Guerriero shows how to set a spacing system in CSS, and how to take advantage of relative units to handle responsiveness.

Read it

C446_git2

How to use Git efficiently

Some helpful advice on making the best use of Git. By Aditya Sridhar.

Read it

Collective #446 was written by Pedro Botelho and published on Codrops.

Building Digital Credibility for Better UX

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/pCNVVLKeob0/

The design of your website does more than offer a way for people to find you on the web – it builds the credibility of your brand. Your website’s UX creates brand associations to gain traction with your customers.

In today’s technological society, it takes more than a pretty website to turn the heads of consumers – though a pretty website helps. Your site must contain credible content, have reliable navigation, and feature structured layouts to have a competitive edge and stay relevant in your industry.

The UX Designer Toolbox
Unlimited Downloads: 500,000+ Wireframe & UX Templates, UI Kits & Design Assets


DOWNLOAD NOW

Know What Consumers Are Looking For

When determining if your site is credible to your consumers, you must have an understanding of your target audience.

Deliver products and experiences that meet their needs to be seen as trustworthy. Define your target audience, then design a website interface that meets their needs.

Create a Great First Impression

In a world filled with instant gratification, we make quick judgments about people, products, and experiences. Current research suggests users form their first impressions of your website in just .05 seconds!

This is where your visual appeal is most important. The other factors come into play after you have captured their initial attention.

The design of your website and the first look your users receive upon arrival tells the story of your business. You must catch your users’ attention in a way that feels personal to establish credibility. Your consumers need to have faith in the story you are telling and the products you are offering.

To give them that faith, spend some time thinking about the details – color, navigation, and font size all make a difference for user experience.

Color schemes have a huge effect on the perceived value and credibility of your business, so spend some time considering the colors of your site. Your favorite colors may look cool to you, but if they come off as unprofessional, they could cost you business. Conversely, if colors seem too old school and your target audience is millennials, you may be seen as out of the loop.

Your navigation bar – regardless of your target audience – should be clear and easy to navigate. If your users are older, ensure that there can be no confusion when navigating the site. Keep your font type and size in mind, too. Curly fonts can lack gravitas, and fonts that are too small are frustrating.

Offer Credible Content

One of the most important ways to be credible to your readers is by providing them with reliable and meaningful content. Consumers who are visiting your website want to read about your products and how they have helped or served people in their community, but they don’t want to feel like they are stuck on a used car lot, so don’t be overly salesy.

Include content that relates to your business but doesn’t feel overly promotional. Offer something of value on your site – consumers are giving you time, give them something in return. It’s a win for you in more ways than one – you’re seen as a thought-leader in your industry, and the higher engagement time on the website means better rankings.

Article by Ruslan Siiz

Up-to-date content shows consumers you are maintaining your website and the information on it. If a user can tell your site has not been updated in months, they won’t stay long. Presenting new information to your users shows you are committed to giving them the latest information regarding your business. It builds trust that you will deliver for them in the future.

Your credible content doesn’t stop at what is written on your site. Photos need to be relevant to your business and set the tone for what you stand for. Appealing photos say a lot about the quality of your business and can make your users feel confident about your brand.

Going out of your way to find images to match your brand and values builds trust. Choosing stock images is easy and doesn’t require much thought – that thoughtlessness shows.

Improve Navigation and Usability

Confusing or malfunctioning navigation is one of the most frustrating things you can encounter on a website. And, at this point in the tech race, users don’t have to put up with it. If your navigation is confusing, you can bet there’s a competitor whose site navigation is clear. Making users work to navigate your site is just asking them to leave.

One way to make your site look professional is to make its usability seamless. When it isn’t, it suggests other aspects of your business might be flawed or created lazily. When users have an easy experience navigating your website, they have a better overall image of you as a professional in your industry.

Navigation Ideas by Oykun Yilmaz

Provide Answers through Effective Layouts

The layout of your website can do even more than just provide effective navigation; it gives users a guide for finding the answers and information they need. Consistency matters from page to page – it should feel like an extension of the identity you’ve created with your brand.

F&W UI Kit by Scott Wakefield

Backgrounds, color choices, navigation tools, and your content’s voice should all have a common feel. Keeping this information consistent can build a positive UX, encouraging users to trust and return to your business.

You may want to tuck away certain aspects of your site, but don’t try to tidy the site up so much that users can’t find what they came to the site to see. Don’t make users click too many times to find important information.

Like a newspaper, the top left corner is the most prominent area – use that precious real estate wisely. National Geographic does a great job with their layout design – consider how clear the info is and how nothing crucial is hidden.

Maintain Information and Links

One of the fastest ways to lose credibility is by having outdated information on your website or links that don’t work. Want to diminish your chances of being a valuable resource? Offer what looks like value with a broken link. Not only will it drive away users, your reputation takes a hit – along with your rankings.

Wrong information tells your users you don’t care enough to keep the information on your website up-to-date, which may make them believe your brand will not provide them with a good experience.

Design Work Is Never Done

With the never-ending development of technology and responsive website elements, you must always stay on top of your design. If your website begins to seem old or isn’t providing enough to your consumers, they will lose trust in your company.

Creating design elements and building your brand to be credible and trustworthy takes more than good intentions and caffeine. Website building and design is business building – create a brand identity using your site, and it will increase your reputation and help you with you every aspect of your business.


How to Launch Your E-Commerce Empire for $100 (or Less)

Original Source: https://www.webdesignerdepot.com/2018/08/how-to-launch-your-e-commerce-empire-for-100-or-less/

No, it’s not a clickbait title and yes, starting with $100 can get you an actual running store.

In this article I’ll go through every step you need to take to get your store up and running and explain the costs involved.

Granted, to keep the costs down you’ll do all the heavy lifting but hey, nothing worthwhile ever comes easy so let’s dive right in…

1. The Product

It might feel odd for some that I would go about explaining how to launch a $100 store and start with the product but truth is, the site, domain, logo everything needs to be tailored to fit the product you are trying to sell. The success or failure of your business will rely on your ability to select the correct product and the right market so don’t skip over this step.

Here’s a quick way to validate your idea: Go to Google Trends and type in a word that describes your product, eg: “phone case” or “headlights”. You’ll see in a graph below how much interest there is in a particular region like the US. Keep in mind you can also see the results of Worldwide searches but if you are going to target a particular region I’d advise you look there. Look for trends going up or have a steady above 40 interest. That’s what you are looking for.

A couple of years ago I launched a business selling baby and toddler related toys, clothes, etc. When I looked at Google Trends I remember doing around 40 different searches and seeing what my audience was looking for to get a proper understanding of what my target audience looks for and what types of products I need to add to the store.

A second, yet just as important step here is to look for what your competition does, how they address their customers and look for negative feedback from their users. See what they do wrong and aim to improve on those aspects specifically.

Cost: $0

2. The Domain

So you found your product and market. Good for you. Now you need to get the domain that will bring in your flock of loyal customers and though it might sound irrelevant, the domain can really hurt you if you don’t get the right one.

So what makes a good domain name?

Good question. It’s hard to decide if you want to get something brandable or get some keywords in the domain name. If you end up using keywords in the domain name you’d give your viewers a clear idea of they’ll be getting when seeing your store but what if you want to pivot? What if you find out 6 months in, that the store is selling more than just whatever your keyword in the domain is. If your aim is to build a strong brand, then by all means, put your brand name in the domain.

In regards to the TLD (Top-level domain) you choose, get a “.com” if your audience is worldwide, and go local if you are targeting a specific country. It’s as simple as that.

Other than that, keep your domain name short, be unique and unless you have no other choice, avoid hyphens.

As far as providers go I usually stick to Godaddy.com or namecheap.com, both are great services with good service and solid support.

Cost: $10

3. The Platform (Self-Hosted Solution vs SaaS)

I could probably talk for the next hour on why you should pick one CMS or another, why you can go serverless or use a traditional hosting or even if you should go for a SaaS option or not, but I won’t go into that much detail. Instead, I’ll touch briefly on each subject and only talk about the main “players” in each category.

We’ve seen, the past few years, an explosion of E-commerce SaaS options, some better than others yet the fact that almost every week you hear about a new SaaS in this segment makes me think there’s still room for innovation.

What are the benefits of having a SaaS? Basically, you get to launch your store exponentially faster. You basically signup, add your products, set up payments and delivery options and you are good to go.

Before I get swarmed by angry mobs yelling at me for not talking about their favorite e-commerce platform provider, I want to point out that I’ll limit this article to only two SaaS platforms, that I think, are different enough to give you a wider perspective on how far you can actually go choosing an e-commerce SaaS.

SaaS

Number 1: the king of e-commerce SaaS: Shopify, an easy to use platform that will make sense for most people needing a simple shop with no need for a whole lot of customization. There’s a ton of support for it, themes, plugins and customizing your shop is really easy.

Number 2: a newer player in the SaaS space, yet special: Blugento, a simple to use SaaS, similar to Shopify in this regards, the difference being that behind the curtains, there a fully functioning Magento platform doing the heavy lifting. (I’ll talk about Magento as a self-hosted platform below.) The main benefit of Blugento is the scalability of the store, something lacking from all other providers and an aspect that’s incredibly important.

Self-hosted solutions are dime a dozen and they differ from one another by a number of differences but perhaps the most important one is the community surrounding it. This is a crucial factor for you and your store. Since you are reading a “$100 e-commerce site” article you probably can’t rely on a big team of in-house developers that you can breed, educate, and have lying around until that inevitable time when your site will go down.

And it will. It will crash in the most unexpected way at the most inconvenient time…

Cost: around $50/month

Self-Hosted CMS

…that’s why I’m going to only talk about the two biggest platforms, Magento and WooCommerce. They are both immensely popular with crazy big communities around them, testing, developing and pushing the platform to the limits.

Number 1: Magento has been around since 2008 and it quickly became a favorite amongst developers even if, at the time, there were bigger and more popular e-commerce CMS. Magento is not going to be for everyone, hosting costs are going to be higher, development is more complicated but in return, you get a versatile store with a lot of room for customization and it scales gracefully so when your business grows, your store can grow with it handling hundreds of thousands of products without a problem.

Number 2: WooCommerce is on the other side of the spectrum, easy to install, development is easy and you get a ton of free plugins and themes. Since it runs on top of WordPress development is cheap and it’s relatively easy to find developers to work on the store adding extra features. Compared to Magento, the management of inventory and orders is faster and easier but after about 50K products added to your store, you’ll have to think about upgrading to something like Magento.

Both self-hosted options described above will need a hosting company before they can see the light of day. I personally recommend going with hostgator.com or siteground.com but there are a ton of great choices out there.

Installing either platform is easy as both hosting providers offer tools for installing Magento or WordPress through a simple point and click wizard. No more messing with the console, creating databases and editing confusing PHP files.

Cost: $0 for the platforms, between $10 – $25 / month for hosting

Serverless

I’d be remiss not to mention serverless in this discussion as this is something that has been talked a lot about in the recent months and we’ve seen big names in E-commerce move their operations to the cloud, companies like Zalora.

Zalora moved everything to AWS, website, mobile apps, warehouse operations, everything is running off of EC2, S3, Lambda, and RedShift. They are the biggest retailer in Asia with over 20 million users and yet, their entire infrastructure development team is composed of 3 people, which for anyone understanding the difficulties running such a large website can say it’s amazing!

This is done through AWS Lambda, a service launched by Amazon that lets you upload small pieces of code that work as microservices, called functions—hence the term Functions as a Service or FaaS. They basically do a very specific task that your website triggers, returning a simple result. The technology behind it promises to allow developers to build websites and apps without having to worry about the backend or the infrastructure, all while keeping the costs at an all-time low.

There are three big reasons for switching to a serverless framework: cost, development speed and scalability. There are companies saving tens of thousands of dollars a month after switching to serverless and an average of 77% faster delivery speed of the products. Check out this case study on how serverless saves money in comparison to traditional hosting solutions.

Poor website performance is now measured in terms of lost customers and revenues

– Tom Lounibos, CEO, SOASTA

4. Branding

If I’d were to say branding is important I’d be grossly understating it. I will say that a solid logo and branding will make up the foundation of your successful store. So how can you build one that reflects your company’s image while still looking professional? Well, the easy way would be to throw money at it, but we don’t roll like that, so we’ll be doing this ourselves.

The first place to start is to look for inspiration and you do this by going through design and branding websites looking at the current trends, tutorials and any tips or tricks that will help you in this endeavor. My suggestion would be to start with sites like hipsthetic.com or designoholic.com and then try to expand your search to Pinterest.

Alright, you now have an idea of what you need but you aren’t going to pay a couple of hundred dollars per month for Photoshop because that will blow the entire budget we’ve set for ourselves. So what we do is we sign up with Canva.com. It’s free and it will get you started quite fast. After watching a 1-minute tutorial you’ll be ready to start creating your first logo.

Don’t stop at one. Make two or three and show them to a couple of friends to get feedback. After picking the winner get back to Canva.com and make a few more: one that has transparency; one that is all black; and one that is all white. You can use the color one for your website and the rest you’ll use to watermark catalog images (I don’t really recommend using watermarks on product images but if you absolutely have to, place them in a corner somewhere) business cards, social media posts, etc. You get the point.

Cost $0

5. First Marketing Steps

Alright, we almost made it. There’s only one little step ahead of us. And by little I actually mean the most important thing you’ll end up doing for your business.

SEO

Let’s start with something basic: on page SEO, sounds easy enough, right? Well, not exactly. There are a lot of moving parts when it comes to SEO and I won’t have time to go into much detail but I will let you with this awesome infographic that will teach you pretty much all you need.

Social Media

You probably know this by now, SM is a tool that you can leverage to get in front of the right customers. Start posting on a regular basis but be careful not to alienate your readers with overzealous posts promoting products. I recommend people use the 8 + 2 rule. You provide 8 pieces of useful content, regardless if it’s on your site or not. Content like tutorials, tips and tricks, peer reviews, etc. Don’t be afraid to test the water with this strategy, find out what your users like and with that type of content they interact and start sharing.

Content Marketing

This will be your bread and butter for the next few months. It’s crucial to have a blog where you can share your experiences and knowledge with your peers. As part of the content marketing efforts, you’ll have to do guest posts. Find like minded people who own blogs and start pitching ideas for guest posts. Most blog owners are fairly easy to reach and communicate with so I highly advise you do this. Guest blogging on small blogs is a great way to reach new audiences but perhaps even better than that would be to go on Medium.com. It’s a great platform to publish content, with a ton of viewers, so I’d strongly suggest you try it out.

6. Advertising

So if my math is correct after getting set up with your website domain and host you’d be left with $30 to $40. I’d advise you drop a few dollars in Facebook ads. It’s easy to do, you don’t need to spend money on a consultant and Facebook has a bunch of tutorials on this. What I’d suggest you do is select the best products you have in your store and create a carousel. Have at least 4 products in there. Select a small audience with the demographic that fits your niche and place a $5 limit on the ad spending. You’ll have around a week to tweak the ad and if you have the right combination of audience and product, chances are you’ll have made your first sell by now.

The Grand Total

If you do the math, going with a self-hosted solution will cost around $50 to host ( for a 5 or 6 month period), add to that $ 10 for the domain and you get to $ 60. You’ll have to host it yourself, do all the maintenance and configuration but you get to have about 6 months to make up your investment.

Going with a SaaS will cost around $60 but you will be done and ready to go in a couple of days which is great if you don’t want to spend time learning to code or set up a CMS. The downside here is that your $50 will cover only that first month which adds to the pressure of making a few sells (which shouldn’t be a problem).

 

Featured image via Depositphotos.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Final Generate London lineup confirmed

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/BIXLzcnx144/final-generate-london-lineup-confirmed

With less than three weeks to the opening of Generate London 2018, preparations for the season’s premier web design conference are really gathering pace. Not only did the Generate flash sale exceed our expectations earlier in the month, but we’ve also been hard at work behind the scenes finalising our roster of top web design and dev speakers for you.

But don’t just take our word for it: here’s just a tiny taste to whet your appetites.

Daniel Olson

Daniel Olsen

As chief operating officer of DigitalCube, Daniel Olson’s responsibilities include product development and growth: he focuses on creating technical solutions centred around WordPress, design thinking and the point those two things intersect.

And this experience undoubtedly inspired his talk at Generate: The Future is SaaS. While the upper limit of what's possible in a digital service-based industry may not exist, the reality of designing a product for scale may have real-world implications for its users and the communities around them. This is why his talk will explore its effect on relationships, quality of life, freedom of choice and what the future of the as-a-service model has in store.

Laura Yarrow

Laura Yarrow

Laura Yarrow is a UX consultant at Experience UX. She’s spent 12 years in the digital industry, first as a web developer and subsequently as a user experience designer, and her passions are ethnographic and field research, behavioural psychology and understanding people.

As a result she is fascinated by what happens when we tell stories. In her talk, The Art and Science of Storytelling, Yarrow will be speaking about how understanding the neuroscience and psychology of storytelling can be used to create engaging, learnable and memorable experiences for your products and services.

Trine Falbe

Trina Falbe

Trine Falbe is a consultant, researcher, speaker and lecturer who empowers people using design. She is the author of the book White Hat UX and is deeply committed to putting humans at the centre of work and building honest, transparent experiences. 

And there is certainly a lot of discussion about ethical design these days. About evil, Silicon Valley surveillance capitalists like Google and Facebook who track, profile and exploit our data.  But the discussion can seem distanced to the developer or designer who is simply trying to make a living. How are we supposed to take up the fight against unethical design? By asking the right questions and by working within a White Hat framework, both of which you’ll get to know in Falbe's talk: Practical, Ethical Design.

Tony Harmer

Tony Harmer

Chief enchantment officer at Wizardry Ltd, Tony Harmer (aka The Design Ninja) is an illustrator, designer and learning-content author who has helped some of the world’s largest brands identify workflow cost savings running into the tens of millions and frustration savings that are priceless. As an Adobe Certified Expert and Instructor in many applications, Harmer has specialised in interoperability with Creative Cloud and is very enthusiastic about the accelerating of desktop production on the desktop through the integration of integration of mobile tools into design workflows.

Harmer’s talk, Generate Web Assets at Lightspeed, will look at the production of graphic assets in today's "more and faster, for less" world and shows a stack of workflow efficiencies that will save time and money.

With Generate only a few short weeks away, there isn’t a whole lot of time left to secure your place. See the full list of speakers here and make sure you pick up your ticket today!

Related articles:

Further web design royalty confirmed for Generate10 fantastic web design tools for July20 awesome books for web designers and developers

7 New Trends in Graphic Design for 2018

Original Source: http://feedproxy.google.com/~r/Designrfix/~3/8ZU6zSSD814/7-new-trends-in-graphic-design-for-2018

With everything going digital, messages are no longer relayed merely through plain text. Instead, visual images are just as useful when it comes to mediums of communication. Same goes for students, creating visual images and graphic designs have been an essential part of their lives. As a student, you may have been asked by a […]

The post 7 New Trends in Graphic Design for 2018 appeared first on designrfix.com.

10 Recommended iPad Apps for Business & Presentation

Original Source: https://www.hongkiat.com/blog/useful-ipad-apps-for-business-presentation/

A list of all the essential presentation and business-related apps for iPad.

The post 10 Recommended iPad Apps for Business & Presentation appeared first on Hongkiat.

Visit hongkiat.com for full content.

UX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 2)

Original Source: https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-2/

UX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 2)

UX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 2)

Stéphanie Walter

2018-08-27T14:00:31+02:00
2018-08-28T18:17:33+00:00

In this second part, I want to focus more on mobile-specific capabilities. HTML5, for instance, has brought us a lot of really cool features to help users fill in mobile forms and format their data. We will see in detail how HTML5 attributes can help you with that. Then, we will go beyond “classic” form elements and see how to use mobile capabilities such as the camera, geolocation and fingerprint scanners to really take your mobile form experience to the next level on websites and in native applications.

Helping The User Format Content With HTML5

In the first part of this series, we saw some general advice on how to display fields. Now it’s time to go a bit deeper and look at how a few well-crafted lines of HTML5 code can improve your mobile forms.

HTML5 Mobile-Optimized Goodness

HTML5 opens a whole world of possibilities for optimizing forms for mobile and touch devices. A lot of interesting new input types can trigger different keyboards to help users. We can also do some interesting things with capturing media directly in the browser.

Entering Numerical Data

input type= number

The HTML5 <input type=number> attribute restricts an input field to numbers. It has a built-in validation system that rejects anything that is not a number.

In some desktop browsers, this input is presented with little arrows on the right that the user can click to increment the number. On mobile, it opens a keyboard with numbers, which decreases typos and form-validation errors. The input’s look and feel depend on the operating system.

On the left, Android’s keyboard, and on the right, the iOS keyboard with numbers.

On the left, Android’s keyboard, and on the right, the iOS keyboard with numbers. (Large preview)

The input should allow for decimals and negative numbers (but few keyboards respect that). As explained in the W3C’s specifications, “a simple way of determining whether to use type=number is to consider whether it would make sense for the input control to have a spinbox interface (e.g. with ‘up’ and ‘down’ arrows)”. This means that the input is not supposed to be used for credit cards or area codes.

With so much happening on the web, what should we really pay attention to? At SmashingConf New York 2018 ?? we’ll explore everything from PWAs, font loading best practices, web performance and eCommerce UX optimization, to refactoring CSS, design workflows and convincing your clients. With Sarah Drasner, Dan Mall, Sara Soueidan, Jason Grigsby, and many other speakers. Oct 23–24.

Check the speakers →

SmashingConf New York 2018, with Dan Mall, Sara Soueidan, Sarah Drasner and many others.

The pattern And inputmode Attributes

To add some restrictions to your number inputs, you could use the pattern attribute to specify a regular expression against which you want to control values.

This is what it looks like:

<input type=”number” id=”quantity” name=”quantity” pattern=”[0-9]*” inputmode=”numeric” />

You can use this pattern to bring up the big-button numeric keyboard on the iPhone (but not the iPad). This keyboard does not have the minus sign or comma, so users lose the ability to use negative numbers and decimals. Also, they can’t switch back to another keyboard here, so be careful when using this.

Also, note that patterns can be applied to any other type of inputs.

Using only this pattern won’t work on most Android phones. You’ll still need a combination of input type=number and the attribute to make this work.

Android and iOS demo with input type=number, pattern and inputmode.

Android and iOS demo with input type=number, pattern and inputmode. (Large preview)

inputmode

If you only want to trigger the mobile numeric keyboard but don’t want to deal with the type=number and pattern mess, you could use a text input and apply the inputmode=numeric attribute. It would look like this:

<input type=”text” id=”quantity” name=”quantity” inputmode=”numeric” />

Unfortunately (at the time of writing), only Chrome 67 mobile supports this, but it should be arriving in Chrome desktop 66 without a flag.

To learn more about how to enter numbers in a form, read “I Wanted to Type a Number”.

input type=tel

If you want users to enter a phone number, you can use the input type=tel. As you can see in the screenshot below, it triggers the same digits on iOS’ keyboard as the pattern attribute described above. Due to the complexity of phone numbers across the world, there is no automatic validation with this input type.

input type=tel on Android and iOS

input type=tel on Android and iOS (Large preview)

Entering Dates

Even if they are technically numerical data, dates deserve their own section. There are a few HTML5 input types for entering dates. The most used is input type=date. It will trigger a date-picker in supported browsers. The appearance of the date-picker depends on the browser and OS. To learn more on how browsers render input type="date", I recommend you read “Making input type=date complicated.”

A date-picker based on input type=date on Android and iOS

A date-picker based on input type=date on Android and iOS (Large preview)

There’s also type=week to pick a week, type=time to enter a time (up to the hour and minute), and type=datetime-local to pick a date and a time (using the user’s local time). So many choices!

Example of date-picker with more options on Android

Example of date-picker with more options on Android (week, date and time, etc.) (Large preview)

input type=date works well for booking interfaces, for example. You might have some needs that require you to build your own date-picker, though (as we’ve already seen in the section on sensible defaults). But input type=date is always a nice option if you need a date-picker and don’t want to bring a whole JavaScript library into the website for the job.

Yet, sometimes not using type=date for dates is better. Let’s take the example of a birth date. If I was born in 1960 (I’m not — this is just an example), it would take me many taps to pick my birth date if I was starting from 2018. On Android, I discovered recently that if I press on the year in the picker, I get a sort of dropdown wheel with all of the years. A bit better, but it still requires a fair amount of scrolling.

A user told me on Twitter:

“I’m born in 1977 and can confirm the annoyance. The more time it takes to scroll, the older you feel :-(”

So, maybe birth dates are not the best candidate for date-pickers.

With Android’s date-picker, even though you can press and hold the year to get a year-picker, picking a birth date is still tedious.

With Android’s date-picker, even though you can press and hold the year to get a year-picker, picking a birth date is still tedious. (Large preview)

URL, Email, Tel And Search

Mobile phones hide some other keyboard and input-optimization goodness that enhance the user’s experience when filling in a form. The devil is in the details, as they say.

Using the input type=url field will bring up an optimized keyboard on mobile, with / (the slash key) directly accessible. Depending on the OS, you can also give quick access to commons top-level domains, like the .fr in the screenshot below. If you long-press this button, shortcuts to other top-level domains will appear. This also comes with automatic browser validation that checks that the URL’s format is valid.

input type=url keyboard on Android and iOS

input type=url keyboard on Android and iOS (Large preview)

The input type=emailfield brings up an email-optimized keyboard giving quick access to the @ symbol. This input requires the presence of @ somewhere in the field in order to be valid. That’s the only verification it does.

input type=email keyboard on Android and iOS

input type=email keyboard on Android and iOS (Large preview)

The input type=search field brings up a search-optimized keyboard. The user can directly launch the search from a button on the keyboard. There’s also a little cross to clear the field and type a new query.

input type=search keyboard on Android and iOS

input type=search keyboard on Android and iOS (Large preview)

Range And Color

The last two input types we looked at are not particularly optimized for mobile, but by using them, we can avoid having to load heavy custom JavaScript libraries, which is a good idea for mobile users.

input type=range provides a visual UI slider to input a number. The UI for this control is browser-dependent.

input type=color provides an easy way for the user to enter a color value. In many browser implementations, this comes with a color-picker.

input type=range and input type=color on Android and iOS

input type=range and input type=color on Android and iOS (Large preview)

HTML Media Capture: Taking And Uploading Pictures And Recording Sound

I remember the time of the iPhone 3, when Apple would not even allow a simple input type=file to be used on a website, for security reasons. Those times are long gone. With the HTML media capture API, it’s now possible to access different sensors of a device. We can capture photos and videos, and we can even record voice directly in the browser.

The accept attribute lets you specify what kind of media to accept in the input: audio, image, video. The user can give the browser direct access to their camera, for example.

The code looks like this:

<input type=”file” id=”take-picture” accept=”image/*”>

The accept attribute is set to image. The browser asks whether I want to access the camera directly or the files on the device.

The accept attribute is set to image. The browser asks whether I want to access the camera directly or the files on the device. (Large preview)

The capture attribute lets you specify the preferred mode of capture. If you add the capture attribute on top of the accept attribute, you can make the browser open the camera or voice recorder directly.

<input type=”file” accept=”image/*” capture> // opens the camera>

<input type=”file” accept=”video/*” capture> // opens the camera in video mode

<input type=”file” accept=”audio/*” capture> // opens the voice recorder

The mobile browser directly opens the capture mechanism: on the left, the camera, on the right, the video recorder.

The mobile browser directly opens the capture mechanism: on the left, the camera, on the right, the video recorder. (Large preview)

For more details on how to use media directly in the browser, read the section “Accessing and Handling Images, Video and Audio Directly in the Browser” in my article on the secret powers of mobile browsers.

HTML5 Autos: Autocorrect, Autocomplete, Autofill, Autocapitalize And Autofocus

HTML5 comes with a slew of automatic attributes. To enhance the mobile experience, you will want to be smart about what can be automated and what can’t. Here are some general rules of thumb:

Disable autocorrect on things for which the dictionary is weak: email addresses, numbers, names, addresses, cities, regions, area codes, credit card numbers.
Disable autocapitalize for email fields and other fields where appropriate (for example, website URLs). Note that type=email does the job for you in recents version of iOS and Android, but disable it anyway for older versions or if type=email is not supported.
You can set the autocapitalize attribute to words to automatically uppercase the first letter of each word the user types. This can be useful for names, places and the like, but, again, be careful with it, and test it.

Use input type=email for email addresses. If you don’t, at least deactivate auto-capitalization. No email address starts with a capital letter.

Use input type=email for email addresses. If you don’t, at least deactivate auto-capitalization. No email address starts with a capital letter. (Large preview)

For input type=tel, set autocomplete="tel".
You could use autofocus to give the focus to a control element when the user loads the page. But just because the user opens the “contact” page, it does not mean they are ready to jump right to the first field of your form. So, again, use it wisely.

In this example, we could use autofocus to take the user directly to the first field once they’ve clicked on the button.

In this example, we could use autofocus to take the user directly to the first field once they’ve clicked on the button. (Large preview)

If you want more autocomplete options, a whole list is on the WhatWG Wiki. Just make sure you use the right ones. Implement, test, and test again.

HTML5 Form Validation

I won’t get into the technical details here, but you should know that HTML5 has a built-in form-validation API for many fields. It’s nice if you don’t want to use a JavaScript library to display inline validation messages. Here are the main things you need to know as a UX designer about HTML5 form validation:

The validation message is a browser control. You can’t style it in CSS, and it’s different for every browser.
You can change the text of the message in JavaScript using setCustomValidity.
CSS3 provides :invalid, :valid and :required and other pseudo-classes for HTML form validation. These get triggered on blur, so are pretty much useless for now.

HTML native form validation in an Android browser

HTML native form validation in an Android browser (Large preview)

In “Native Form Validation, Part 1,” Peter-Paul Koch goes into detail on why HTML and CSS form validation doesn’t really make forms better at this time.

Offline Support To Save User Data

A lot of things can go wrong, especially on mobile. Mistakes happen. A user could mistap the back button in the browser and lose all of their data.

If the user comes back to the page, it would be nice to display their data again. The same goes for if the browser crashes or the user closes the tab. You can store the user’s data in local or session storage to ensure nothing gets lost if something goes wrong. Geoffrey Crofte has written a JavaScript library to help you with that.

If the connection is lost as the user is submitting the form, they might also lose the data. To avoid this, you could use a combination of the** HTML5 offline API** and the Service Workers API to:

store the data in the cache,
try to automatically send it again when the connection comes back.

To learn how to code this, check out the article on “Offline-Friendly Forms”.

Mobile Device Capabilities Can Take the Experience To The Next Level

In part 1, we stuck to the basic common HTML form elements and attributes for enhancing mobile forms. But mobile devices capabilities now go far beyond displaying HTML, CSS and JavaScript web pages. Those little devices come equipped with a lot of sensors. And we will be able to use many of those in native apps and on the web to make our users’ lives so much easier.

Detecting The User’s Location

In the previous section, I wrote about pre-filling information for places and addresses. That’s a good start. We can go one step further. Instead of asking users to type a location, we can detect it. Meet the geolocation API for the web. There are also native iOS, Android and Windows Phone geolocation APIs.

Citymapper is a website and an app that helps users plan their travels. When the user goes into the first field, they see the “Use current location” option. If they select it, they are asked to allow the browser to access their geolocation data. This is the geolocation API. The browser then autocompletes the location it found and, the user can proceed to the destination field. The native app works pretty much the same way.

Citymapper proposes the user’s current location as the starting point for the journey.

Be Smart When Asking For The User’s Permission

You might have noticed in the previous video that I had to agree to give access to my position to the Citymapper website. In the browser, the user handles permissions website by website, API by API.

You also need to be careful how you ask for permission. The user might refuse access to the geolocation, notification or other API if you ask too soon. They also might refuse if they don’t understand why you need the permission. You get one chance; use it wisely. After that, it will be almost impossible to recover. I’m an Android power user, and even I have to search around for the options in my browser when I want to reset the permissions I’ve given to a website. Imagine the trouble your users will have.

Here is some general advice on asking for permissions on the web:

Don’t be the creepy geolocation or notification stalker: Don’t ask for permission as soon as the user arrives on your website. They might not know about you or your service yet.
Let the user discover your website and service. Then, ask for permission in context. If you want to access their location, ask them only when you need it (Citymapper is a good example).
Explain why you need permission and what you will do with it.

Citymapper asks for access to the user’s location only when it needs it. Clearing permissions after the user refuses it can get really complicated because the user will need to search through their settings for that website.

Citymapper asks for access to the user’s location only when it needs it. Clearing permissions after the user refuses it can get really complicated because the user will need to search through their settings for that website. (Large preview)

If you want to go further, Luke Wroblewski (yes, him again) has created a nice video to help you with the permission-asking process.

A Better Checkout Experience

A big area of improvement for forms is the whole checkout payment experience. Here again, sensors on the device can make this an almost painless experience. The only pain will be the amount of money the user spends.

iOS Credit Card Scanner

In the previous section, I wrote about autodetection of credit cards and autocompletion features based on the user’s previous input. This still means that the user has to type their credit card data at least once.

Apple has taken this to the next level with its credit card scanner. Since iOS 8 in Safari, users can use their camera to scan and autocomplete their credit card information. To perform this magic, you will need to add the autocomplete cc-number attribute and some name to identify this as a credit card field. Apple doesn’t have much official information on it, but some people did some testing and put the results on StackOverflow.

Safari also has autofill options that users can use to add their credit card, allowing them reuse it on multiple websites.

The credit card scanning option appears when Safari detects a field that matches the credit card format. If the user already has a card registered on the phone, they can use the autofill option.

The credit card scanning option appears when Safari detects a field that matches the credit card format. If the user already has a card registered on the phone, they can use the autofill option. (Large preview)

Take Checkout One Step Further With Google Pay API

Google launched something similar: the Google Pay API. When implemented on a website, the API eliminates the need to manually enter payment information. It goes one step further: It can store billing and shipping addresses as well.

The user gets a dialog in Chrome that displays the various payment information they’ve stored. They can choose which one to use and can pay directly through the dialog.

The Google Pay API pop-up triggered on an e-commerce website

The Google Pay API pop-up triggered on an e-commerce website (Source) (Large preview)

A standardized version of the Payment Request API is currently a W3C candidate recommendation. If this gets implemented in browsers, it would allow users to check out with a single button, which would request the API. Every step thereafter would be handled by native browser dialogs.

Making Authentication Easier

Mobile phones are, in most cases, personal devices that people don’t usually share with others. This opens up some interesting opportunities for authentication.

Magic Link

I use a password manager. I don’t know 99% of my passwords. They are all randomly generated. In order to log into a new Slack workspace, I must:

open my password manager,
enter my master password,
search for the workspace,
copy and paste the password into the Slack app.

It’s a tedious process, but Slack was smart enough to provide a better option.

Many users have they mail synchronized on their phone. Slack understood that. When you add a new Slack workspace in the app, you can either log in using the password or ask for the “magic link” option. If you opt for the latter, Slack sends a magic link to your mailbox. Open the mail, click on the big green button, and — ta-da! — you’re logged in.

Behind the scenes, this magic link contains an authentication token. The Slack app catches this and authenticates you without requiring the password.

When using the magic link option, Slack sends you an email with a link that lets you connect to your slack without having to enter your password.

When using the magic link option, Slack sends you an email with a link that lets you connect to your slack without having to enter your password. (Large preview)

Fingerprint For Smart Identification

I do almost all of my banking on my mobile device. And when it comes to logging into my bank accounts, there’s a world of difference between my French Societe General bank app and the German N26 app.

With Société Générale, I have a login string and a passphrase. I can ask the app to remember the login string, which is 10 random digits. I’m not able to remember that one; I use a password manager for it. I must still remember and enter the six-digit passphrase on a custom-built keypad. Of course, the numbers’ positions change every time I log in. Security — yeah, I know. Also, I must change this passphrase every three months. The last time I was forced to change the passphrase, I did what most people do: choose almost the same passphrase, because I don’t want to have to remember yet another six-digit number. And of course, I was damn sure I would remember it, so I did not enter it in my password manager. Rookie mistake. Two weeks later, I tried to log in. Of course, I forgot it. I made three failed attempts, and then my account was blocked. Fortunately, I only use this account for savings. In the app, you can ask for a new passcode. It took almost one week for the bank to send me a new six-digit passphrase by paper mail to my home address in Luxembourg. Yeah.

N26, on the other hand, uses my email address as the login string. I can remember that without a password manager. When I want to log in, I put my finger on the start button of my Xperia phone, and that’s it. In the background, my phone scans my fingerprint and authenticates me. If that does not work, I can fall back to a password.

Same device, two apps, two totally different experiences.

Dropbox has another example of fingerprint authentication.

Dropbox has another example of fingerprint authentication. (Large preview)

More and more apps on both Android and iOS now offer user the possibility to authenticate with a fingerprint. No more passwords — it’s an interesting and elegant solution.

Of course, people have expressed some security concerns about this. For the National Institute of Standards and Technology (NIST), biometrics is not considered secure enough. It advises combining biometrics with a second factor of authentication.

Fingerprint sensors can also be tricked — yes, like in spy movies. Did you hear about the plane that was forced to land because a woman learned of her husband’s infidelity after using his thumb to unlock his phone while he was sleeping?

Facial Recognition And Face ID

In 2018, Apple launched the iPhone X with the brand new face ID. Users can unlock their iPhone X using their face. Of course, some other Android phones and Windows tablets and computers had proposed this feature earlier. But when Apple launches something, it tends to become “a thing”. For the moment, this technology is mostly used as authentication to unlock phones and computer.

There are some pretty big challenges with facial-recognition technology. First, some algorithms can be fooled by a picture of the person, which is easily hackable. Another bigger concern is diversity. Facial-recognition algorithms tend to have difficulty recognizing people of color. For instance, a black researcher had to wear a white mask to test her own project. The researcher is Joy Buolamwini, and she gave a TED talk about the issue.

Some facial-recognition software is also used by some customs services to speed up border processing. It is used in New Zealand and will be used in Canada.

Most of us have seen enough science fiction to see the potential problems and consequences of systems that use facial recognition at scale. This kind of technology used outside of the private space of unlocking phones can get controversial and scary.

Google: One-Tap Sign-Up

If a user has a Google account, they can benefit from Google’s one-tap sign-up. When visiting a website and prompted to create an account in an inline dialog, the user doesn’t need to enter a password. Google provides a secure token-based password-less account, linked to the user’s Google account. When the user returns, they are automatically signed in. If they store their passwords in the Smart Lock, they get automatically signed in on other devices as well.

Google’s one-tap sign-up dialog

Google’s one-tap sign-up dialog (Source) (Large preview)

Note: This is an interesting password-less solution. Of course, by using it, users are linked to Google, which not everyone will feel comfortable with.

Conclusion

You can do a lot of really cool things when you start using mobile capabilities to help users fill in forms. We need a mobile-first mindset when building forms; otherwise, we’ll get stuck on the desktop capabilities we are familiar with.

Again, be careful with the device’s capabilities: always have a fallback solution in case a sensor fails or the user refuses access. Avoid making those capabilities the only options for those functions (unless you are building a map app that relies on geolocation).

This is the end of a series of two really long articles in which I’ve given you some general UX and usability advice and best practices. In the end, what matter are your form and your users. Some things described here might not even work specifically for your users — who knows? So, whatever you do, don’t take my (or Luke’s) word for it. Test it, with real users, on real devices. Measure it. And test again. Do some user research and usability testing. User experience is not only about best practices and magic recipes that you copy and paste. You need to adapt the recipe to make it work for you.

So, in short: Test it. Test it on real devices. Test it with real users.

Smashing Editorial
(lf, ra, al, il)

Best Practices For Mobile Form Design

Original Source: https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/

Best Practices For Mobile Form Design

Best Practices For Mobile Form Design

Nick Babich

2018-08-28T16:00:09+02:00
2018-08-28T14:30:50+00:00

(This article is kindly sponsored by Adobe.) Forms are the linchpin of all mobile interactions; it stands between the person and what they’re looking for. Every day, we use forms for essential online activities. Recall the last time you bought a ticket, booked a hotel room or made a purchase online — most probably those interactions contained a step with filling out a form.

Forms are just a means to an end. Users should be able to complete them quickly and without confusion. In this article, you’ll learn practical techniques that will help you design an effective form.

What Makes For An Effective Form

The primary goal with every form is completion. Two factors have a major impact on completion rate:

Perception of complexity
The first thing users do when they see a new form is estimate how much time is required to complete it. Users do this by scanning the form. Perception plays a crucial role in the process of estimation. The more complex a form looks, the more likely users will abandon the process.
Interaction cost
Interaction cost is the sum of efforts — both cognitive and physical — that the users put into interacting with an interface in order to reach their goal. Interaction cost has a direct connection with form usability. The more effort users have to make to complete a form, the less usable the form is. A high interaction cost could be the result of data that is difficult to input, an inability to understand the meaning of some questions, or confusion about error messages.

The Components Of Forms

A typical form has the following five components:

Input fields
These include text fields, password fields, checkboxes, radio buttons, sliders and any other fields designed for user input.
Field labels
These tell users what the corresponding input fields mean.
Structure
This includes the order of fields, the form’s appearance on the page, and the logical connections between different fields.
Action buttons
The form will have at least one call to action (the button that triggers data submission).
Feedback
Feedback notifies the user about the result of an operation. Feedback can be positive (for example, indicating that the form was submitted successfully) or negative (saying something like, “The number you’ve provided is incorrect”).

This article covers many aspects related to structure, input fields, labels, action buttons and validation. Most points mentioned in this article have visual do and don’t examples; all such examples were created using Adobe XD.

Input Fields

When it comes to form design, the most important thing a designer can do is to minimize the need for typing. Reducing input effort is essential. Designers can achieve this goal by focusing on form field design.

Minimize The Total Number Of Fields

Every field you ask users to fill out requires some effort. The more effort is needed to fill out a form, the less likely users will complete the form. That’s why the foundational rule of form design is shorter is better — get rid of all inessential fields.

Baymard Institute analyzed checkout forms and found that a too long or too complicated checkout process is one of the top reasons for abandonment during checkout. The study found that the average checkout contains almost 15 form fields. Most online services could reduce the number of fields displayed by default by 20 to 60%.

Top reasons for abandonment during checkout. (Image: Baymard Institute) (Large preview)

Many designers are familiar with the “less is more” rule; still, they ask additional questions in an attempt to gather more data about their users. It might be tempting to collect more data about your users during the initial signup, but resist that temptation. Think about it this way: With every additional field you add to your form, you increase the chance of losing a prospective user. Is the information you gain from a field worth losing new users? Remember that, as long as you’ve collected a user’s contact information, you can always follow up with a request for more data.

Clearly Distinguish All Optional Fields

Before optimizing optional fields, ask yourself whether you really need to include them in your form. Think about what information you really need, not what you want. Ideally, the number of optional fields in your form should be zero.

If after a brainstorming session, you still want to include a few optional questions in your form, make it clear for users that those fields are optional:

Mark optional fields instead of mandatory ones.
If you ask as little as possible, then the vast majority of fields in your form will be mandatory. Therefore, mark only those fields in the minority. For instance, if five out of six fields are mandatory, then it makes sense to mark only one field as optional.
Use the “Optional” label to denote optional fields.
Avoid using the asterisk (*) to mean “optional.” Not all users will associate the asterisk with optional information, and some users will be confused by the meaning (an asterisk is often used to denote mandatory fields).

Clearly distinguish all optional fields.

Clearly distinguish all optional fields. (Large preview)

Size Fields Accordingly

When possible, use field length as an affordance. The length of an input field should be in proportion to the amount of information expected in the field. The size of the field will act as a visual constraint — the user will know how much text is expected to be entered just by looking at the field. Generally, fields such as ones for area codes and house numbers should be shorter than ones for street addresses.

The size of a field is used as a visual constraint.

The size of a field is used as a visual constraint. (Large preview)

Offer Field Focus

Auto-focus the first input field in your form. Auto-focusing a field gives the user an indication and a starting point, so that they are able to quickly start filling out the form. By doing that, you reduce the interaction cost — saving the user one unnecessary tap.

Make the active input field prominent and focused. The field focus itself should be crystal clear — users should be able to understand at a glance where the focus is. It could be an accented border color or a fade-in of the box.

Amazon puts strong visual focus on the input field.

Amazon puts strong visual focus on the input field. (Large preview)

Don’t Ask Users To Repeat Their Email Address

The reason why an extra field for the email address is so popular among product developers is apparent: Every company wants to minimize the risk of hard bounces (non-deliverables caused by invalid email addresses). Unfortunately, following this approach doesn’t guarantee that you’ll get a valid address. Users often copy and paste their address from one field to another.

Avoid asking users to retype their email address.

Avoid asking users to retype their email address. (Large preview)

Provide “Show Password” Option

Duplicating the password input field is another common mistake among product designers. Designers follow this approach because they believe it will prevent users from mistyping a password. In reality, a second field for a password not only increases interaction cost, but also doesn’t guarantee that users will proceed without mistakes. Because users don’t see what they’ve entered in the field, they can make the same mistake twice (in both fields) and will face a problem when they try to log in using a password. As Jakob Nielsen summarized:

Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures.

Instead of duplicating the password field, provide an option that allows users to view the password they have chosen to create. Have an icon or checkbox that unmasks the password when clicked. A password preview can be an opportunity for users to check their data before sending.

Show password' option

Not being able to see what you’re typing is a huge issue. Providing a ‘Show password’ option next to the password field will help to solve this problem. (Large preview)

Don’t Slice Data Fields

Do not slice fields when asking for a full name, phone number or date of birth. Sliced fields force the user to make additional taps to move to the next field. For fields that require some formatting (such as phone numbers or a date of birth), it’s also better to have a single field paired with clear formatting rules as its placeholder.

“Full name” field

Avoid splitting input fields; don’t make people jump between fields. Instead of asking for a first name and last name in two separate fields, have a single ‘Full name’ field. (Large preview)

Avoid Dropdown Menus

Luke Wroblewski famously said that dropdowns should be the UI of last resort. Dropdowns are especially bad for mobile because collapsed elements make the process of data input harder on a small screen: Placing options in a dropdown requires two taps and hides the options.

If you’re using a dropdown for selection of options, consider replacing it with radio buttons. They will make all options glanceable and also reduce the interaction cost — users can tap on the item and select at once.

(Large preview)

Use Placeholders And Masked Input

Formatting uncertainty is one of the most significant problems of form design. This problem has a direct connection with form abandonment — when users are uncertain of the format in which they should provide data, they can quickly abandon the form. There are a few things you can do to make the format clear.

Placeholder Text

The text in an input field can tell users what content is expected. Placeholder text is not required for simple fields such as “Full name”, but it can be extremely valuable for fields that require data in a specific format. For example, if you design search functionality for tracking a parcel, it would be good to provide a sample tracking number as a placeholder for the tracking-number field.

(Large preview)

It’s vital that your form should have a clear visual distinction between the placeholder text and the actual value entered by the user. In other words, placeholder text shouldn’t look like a preset value. Without clear visual distinction, users might think that the fields with placeholders already have values.

Masked Input

Field masking is a technique that helps users format inputted text. Many designers confuse field masking with placeholder text — they are not the same thing. Unlike placeholders, which are basically static text, masks automatically format the data provided by the user. In the example below, the parentheses, spaces and dashes appear on the screen automatically as a phone number is entered.

Masked input also makes it easy for users to validate information. When a phone number is displayed in chunks, it makes it easier to find and correct a typo.

Masked input for a phone number. (Image: Josh Morony)

Provide Matching Keyboard

Mobile users appreciate apps and websites that provide an appropriate keyboard for the field. This feature prevents them from doing additional actions. For example, when users need to enter a credit card number, your app should only display the dialpad. It’s essential to implement keyboard matching consistently throughout the app (all forms in your app should have this feature).

Set HTML input types to show the correct keypad. Seven input types are relevant to form design:

input type=”text” displays the mobile device’s normal keyboard.
input type=”email” displays the normal keyboard and ‘@’ and ‘.com’.
input type=”tel” displays the numeric 0 to 9 keypad.
input type=”number” displays a keyboard with numbers and symbols.
input type=”date” displays the mobile device’s date selector.
input type=”datetime” displays the mobile device’s date and time selector.
input type=”month” displays the mobile device’s month and year selector.

When users tap into a field with credit card number, they should see a numerical dialpad — all numbers, no letters. (Large preview)

Use A Slider When Asking For A Specific Range

Many forms ask users to provide a range of values (for example, a price range, distance range, etc.). Instead of using two separate fields, “from” and “to”, for that purpose, use a slider to allow users to specify the range with a thumb interaction.

Sliders are good for touch interfaces because they allow users to specify a range without typing.

Sliders are good for touch interfaces because they allow users to specify a range without typing. (Large preview)

Clearly Explain Why You’re Asking For Sensitive Information

People are increasingly concerned about privacy and information security. When users see a request for information they consider as private, they might think, “Hm, why do they need this?” If your form asks users for sensitive information, make sure to explain why you need it. You can do that by adding support text below relevant fields. As a rule of thumb, the explanation text shouldn’t exceed 100 characters.

A request for a phone number in a booking form might confuse users. Explain why you are asking for it.

A request for a phone number in a booking form might confuse users. Explain why you are asking for it. (Large preview)

Be Careful With Static Defaults

Unlike smart defaults, which are calculated by the system based on the information the system has about users, static defaults are preset values in forms that are the same for all users. Avoid static defaults unless you believe a significant portion of your users (say, 95%) would select those values — particularly for required fields. Why? Because you’re likely to introduce errors — people scan forms quickly, and they won’t spend extra time parsing all of the questions; instead, they’ll simply skip the field, assuming it already has a value.

Protect User Data

Jef Raskin once said, “The system should treat all user input as sacred.” This is absolutely true for forms. It’s great when you start filling in a web form and then accidentally refresh the page but the data remains in the fields. Tools such as Garlic.js help you to persist a form’s values locally until the form is submitted. This way, users won’t lose any precious data if they accidentally close the tab or browser.

Automate Actions

If you want to make the process of data input as smooth as possible, it’s not enough to minimize the number of input fields — you should also pay attention to the user effort required for the data input. Typing has a high interaction cost — it’s error-prone and time-consuming, even with a physical keyboard. But when it comes to mobile screens, it becomes even more critical. More typing increases the user’s chance of making errors. Strive to prevent unnecessary typing, because it will improve user satisfaction and decrease error rates.

Here are a few things you can do to achieve this goal:

Autocomplete

Most users experience autocompletion when typing a question in Google’s search box. Google provides users with a list of suggestions related to what the user has typed in the field. The same mechanism can be applied to form design. For example, a form could autocomplete an email address.

This form suggests the email host and saves users from typing a complete address. (Image: GitHub)

Autocapitalize

Autocapitalizing makes the first letter a capital automatically. This feature is excellent for fields like names and street addresses, but avoid it for password fields.

Autocorrect

Autocorrection modifies words that appear to be misspelled. Turn this feature off for unique fields, such as names, addresses, etc.

Auto-filling of personal details

Typing an address is often the most cumbersome part of any online signup form. Make this task easier by using the browser function to fill the field based on previously entered values. According to Google’s research, auto-filling helps people fill out forms 30% faster.

Address prefill. Image: Google

Use The Mobile Device’s Native Features To Simplify Data Input

Modern mobile devices are sophisticated devices that have a ton of amazing capabilities. Designers can use a device’s native features (such as camera or geolocation) to streamline the task of inputting data.

Below are just a few tips on how to make use of sensors and device hardware.

Location Services

It’s possible to preselect the user’s country based on their geolocation data. But sometimes prefilling a full address can be problematic due to accuracy issues. Google’s Places API can help solve this problem. It uses both geolocation and address prefilling to provide accurate suggestions based on the user’s exact location.

Address lookup using Google Places API. (Image: Chromatic HQ) (Large preview)

Using location services, it’s also possible to provide smart defaults. For example, for a “Find a flight” form, it’s possible to prefill the “From” field with the nearest airport to the user based on the user’s geolocation.

Biometric Authorization

The biggest problem of using a text password today is that most people forget passwords. 82% of people can’t remember their passwords, and 5 to 10% of sessions require users to reset a password. Password recovery is a big deal in e-commerce. 75% of users wouldn’t complete a purchase if they had to attempt to recover their password while checking out.

The future of passwords is no passwords. Even today, mobile developers can take advantage of biometric technologies. Users shouldn’t need to type a password; they should be able to use biometric readers for authentication — signing in using a fingerprint or face scanning.

eBay took advantage of the biometrics functionality on smartphones. Users can use their thumbprint to login into their eBay account.

eBay took advantage of the biometrics functionality on smartphones. Users can use their thumbprint to login into their eBay account. (Large preview)

Camera

If your form asks users to provide credit card details or information from their driver’s license, it’s possible to simplify the process of data input by using the camera as a scanner. Provide an option to take a photo of the card and fill out all details automatically.

Let users scan their identity card, instead of having to fill out their credit card information manually. (Image: blinkid)

But remember that no matter how good your app fills out the fields, it’s essential to leave them available for editing. Users should be able to modify the fields whenever they want.

Voice

Voice-controlled devices, such as Apple HomePod, Google Home and Amazon Echo, are actively encroaching on the market. The number of people who prefer to use voice for common operations has grown significantly. According to ComScore, 50% of all searches will be voice searches by 2020.

How people in the US use smart speakers (according to comScore) (Large preview)

As users get more comfortable and confident using voice commands, they will become an expected feature of mobile interactions. Voice input provides a lot of advantages for mobile users — it’s especially valuable in situations when users can’t focus on a screen, for example, while driving a car.

When designing a form, you can provide voice input as an alternative method of data input.

Google Translate provides an option to enter the text for translation using voice. (Large preview)

Field Labels

Write Clear And Concise Labels

The label is the text that tells users what data is expected from them in a particular input field. Writing clear labels is one of the best ways to make a form more accessible. Labels should help the user understand what information is required at a glance.

Avoid using complete sentences to explain. A label is not help text. Write succinct and crisp labels (a word or two), so that users can quickly scan your form.

Place The Label And Input Close Together

Put each label close to the input field, because the eye will visually know they’re tied together.

A label and its field should be visually grouped, so that users can understand which label belongs to which field.

A label and its field should be visually grouped, so that users can understand which label belongs to which field. (Large preview)

Don’t Use Disappearing Placeholder Text As Labels

While inline labels look good and save valuable screen estate, these benefits are far outweighed by the significant usability drawbacks, the most critical of which is the loss of context. When users start entering text in a field, the placeholder text disappears and forces people to recall this information. While it might not be a problem for simple two-field forms, it could be a big deal for forms that have a lot of fields (say, 7 to 10). It would be tough for users to recall all field labels after inputting data. Not surprisingly, user testing continually shows that placeholders in form fields often hurt usability more than help.

Don’t use placeholder text that disappears when the user interacts with the field.

Don’t use placeholder text that disappears when the user interacts with the field. (Large preview)

There’s a simple solution to the problem of disappearing placeholders: the floating (or adaptive) label. After the user taps on the field with the label placeholder, the label doesn’t disappear, it moves up to the top of the field and makes room for the user to enter their data.

Floating labels assure the user that they’ve filled out the fields correctly. (Image: Matt D. Smith)

Top-Align Labels

Putting field labels above the fields in a form improves the way users scan the form. Using eye-tracking technology for this, Google showed that users need fewer fixations, less fixation time and fewer saccades before submitting a form.

Another important advantage of top-aligned labels is that they provide more space for labels. Long labels and localized versions will fit more easily in the layout. The latter is especially suitable for small mobile screens. You can have form fields extend the full width of the screen, making them large enough to display the user’s entire input.

(Large preview)

Sentence Case Vs. Title Case

There are two general ways to capitalize words:

Title case: Capitalize every word. “This Is Title Case.”
Sentence case: Capitalize the first word. “This is sentence case.”

Using sentence case for labels has one advantage over title case: It is slightly easier (and, thus, faster) to read. While the difference for short labels is negligible (there’s not much difference between “Full Name” and “Full name”), for longer labels, sentence case is better. Now You Know How Difficult It Is to Read Long Text in Title Case.

Avoid Using Caps For Labels

All-caps text  —  meaning text with all of the letters cap­i­tal­ized  —  is OK in contexts that don’t involve substantive reading (such as acronyms and logos), but avoid all caps otherwise. As mentioned by Miles Tinker in his work Legibility of Print, all-capital print dramatically slows the speed of scanning and reading compared to lowercase type.

All-capitalized letters

All-capitalized letters are hard to scan and read. (Large preview)

Layout

You know by now that users scan web pages, rather than read them. The same goes for filling out forms. That’s why designers should design a form that is easy to scan. Allowing for efficient, effective scanning is crucial to making the process of the filling out a form as quick as possible.

Use A Single-Column Layout

A study by CXL Institute found that single-column forms are faster to complete than multi-column forms. In that study, test participants were able to complete a single-column form an average of 15.4 seconds faster than a multi-column form.

Multiple columns disrupt a user’s vertical momentum; with multiple columns, the eyes start zigzagging. This dramatically increases the number of eye fixations and, as a result, the completion time. Moreover, multiple-column forms might raise unnecessary questions in the user, like “Where should I begin?” and “Are questions in the right column equal in importance to questions in the left one?”

In a one-column design, the eyes move in a natural direction, from top to bottom, one line at a time. This helps to set a clear path for the user. One column is excellent for mobile because the screens are longer vertically, and vertical scrolling is a natural motion for mobile users.

There are some exceptions to this rule. It’s possible to place short and logically related fields on the same row (such as for the city and area code).

If a form has horizontally adjacent fields, the user has to scan the form following a Z pattern. When the eyes start zigzagging, it slows the speed of comprehension and increases completion time. (Large preview)

(Large preview)

Create A Flow With Your Questions

The way you ask questions also matters. Questions should be asked logically from the user’s perspective, not according to the application or database’s logic, because it will help to create a sense of conversation with the user. For example, if you design a checkout form and asks for details such as full name, phone number and credit card, the first question should be for the full name. Changing the order (for example, starting with a phone number instead of a name) leads to discomfort. In real-world conversations, it would be unusual to ask for someone’s phone number before asking their name.

Defer In-Depth Questions To The End

When it comes to designing a flow for questions you want to ask, think about prioritization. Follow the rule “easy before difficult” and place in-depth or personal questions last. This eases users into the process; they will be more likely to answer complex and more intrusive questions once they’ve established a rapport. This has a scientific basis: Robert Cialdini’s principle of consistency stipulates that when someone takes a small action or step towards something, they feel more compelled to finish.

Group Related Fields Together

One of the principles of Gestalt psychology, the principle of proximity, states that related elements should be near each other. This principle can be applied to the order of questions in a form. The more related questions are, the closer they should be to each other.

Designers can group related fields into sections. If your form has more than six questions, group related questions into logical sections. Don’t forget to provide a good amount of white space between sections to distinguish them visually.

Generally, if your form has more than six questions, it’s better to group related questions into logical sections. Put things together that make sense together. (Large preview)

Make A Long Form Look Simpler

How do you design a form that asks users a lot of questions? Of course, you could put all of the questions on one screen. But this hinder your completion rate. If users don’t have enough motivation to complete a form, the form’s complexity could scare them away. The first impression plays a vital role. Generally, the longer or more complicated a form seems, the less likely users will be to start filling in the blanks.

Minimize the number of fields visible at one time. This creates the perception that the form is shorter than it really is.

There are two techniques to do this.

Progressive Disclosure

Progressive disclosure is all about giving users the right thing at the right time. The goal is to find the right stuff to put on the small screen at the right time:

Initially, show users only a few of the most important options.
Reveal parts of your form as the user interacts with it.

Using progressive disclosure to reduce cognitive load and keep the user focused on a task. (Image: Ramotion)

Chunking

Chunking entails breaking a long form into steps. It’s possible to increase the completion rate by splitting a form into a few steps. Chunking can also help users process, understand and remember information. When designing multi-step forms, always inform users of their progress with a completeness meter.

Progress tracker for e-commerce form. (Image: Murat Mutlu) (Large preview)

Designers can use either a progress tracker (as shown in the example above) or a “Step # out of #” indicator both to tell how many steps there are total and to show how far along the user is at the moment. The latter approach could be great for mobile forms because step indication doesn’t take up much space.

Action Buttons

A button is an interactive element that direct users to take an action.

Make Action Buttons Descriptive

A button’s label should explain what the button does; users should be able to understand what happens after a tap just by looking at the button. Avoid generic labels such as “Submit” and “Send”, using instead labels that describe the action.

Label should help users finish the sentence, ‘I want to…’ For example, if it’s a form to create an account, the call to action could be ‘Create an account’. (Large preview)

Don’t Use Clear Or Reset Buttons

Clear or reset buttons allow users to erase their data in a form. These buttons almost never help users and often hurt them. The risk of deleting all of the information a user has entered outweighs the small benefit of having to start again. If a user fills in a form and accidentally hits the wrong button, there’s a good chance they won’t start over.

Use Different Styles For Primary And Secondary Buttons

Avoid secondary actions if possible. But if your form has two calls to action (for example, an e-commerce form that has “Apply discount” and “Submit order”) buttons, ensure a clear visual distinction between the primary and secondary actions. Visually prioritize the primary action by adding more visual weight to the button. This will prevent users from tapping on the wrong button.

Ensure a clear visual distinction between primary and secondary buttons. (Large preview)

Design Finger-Friendly Touch Targets

Tiny touch targets create a horrible user experience because they make it challenging for users to interact with interactive objects. It’s vital to design finger-friendly touch targets: bigger input fields and buttons.

The image below shows that the width of the average adult finger is about 11 mm.

People often blame themselves for having “fat fingers”. But even baby fingers are wider than most touch targets. (Image: Microsoft) (Large preview)

According to material design guidelines, touch targets should be at least 48 × 48 DP. A touch target of this size results in a physical size of about 9 mm, regardless of screen size. It might be appropriate to use larger touch targets to accommodate a wider spectrum of users.

Not only is target size important, but sufficient space between touch targets matters, too. The main reason to maintain a safe distance between touch targets is to prevent users from touching the wrong button and invoking the wrong action. The distance between buttons becomes extremely important when binary choices such as “Agree” and “Disagree” are located right next to each other. Material design guidelines recommend separating touch targets with 8 DP of space or more, which will create balanced information density and usability.

(Large preview)

Disable Buttons After Tap

Forms actions commonly require some time to be processed. For example, data calculation might be required after a submission. It’s essential not only to provide feedback when an action is in progress, but also to disable the submit button to prevent users from accidentally tapping the button again. This is especially important for e-commerce websites and apps. By disabling the button, you not only prevent duplicate submissions, which can happen by accident, but you also provide a valuable acknowledgment to users (users will know that the system has received their submission).

This form disables the button after submission. (Image: Michaël Villar)

Assistance And Support

Provide Success State

Upon successful completion of a form, it’s critical to notify users about that. It’s possible to provide this information in the context of an existing form (for example, showing a green checkmark above the refreshed form) or to direct users to a new page that communicates that their submission has been successful.

Example of success state. (Image: João Oliveira Simões)

Errors And Validation

Users will make mistakes. It’s inevitable. It’s essential to design a user interface that supports users in those moments of failures.

While the topic of errors and validation deserves its own article, it’s still worth mentioning a few things that should be done to improve the user experience of mobile forms.

Use Input Constraints for Each Field

Prevention is better than a cure. If you’re a seasoned designer, you should be familiar with the most common cases that can lead to an error state (error-prone conditions). For example, it’s usually hard to correctly fill out a form on the first attempt, or to properly sync data when the mobile device has a poor network connection. Take these cases into account to minimize the possibility of errors. In other words, it’s better to prevent users from making errors in the first place by utilizing constraints and offering suggestions.

For instance, if you design a form that allows people to search for a hotel reservation, you should prevent users from selecting check-in dates that are in the past. As shown in the Booking.com example below, you can simply use a date selector that allows users only to choose today’s date or a date in the future. Such a selector would force users to pick a date range that fits.

You can significantly decrease the number of mistakes or incorrectly inputted data by putting constraints on what can be inputted in the field. The date picker in Booking.com’s app displays a full monthly calendar but makes past dates unavailable for selection. (Large preview)

Don’t Make Data Validation Rules Too Strict

While there might be cases where it’s essential to use strict validation rules, in most cases, strict validation is a sign of lazy programming. Showing errors on the screen when the user provides data in a slightly different format than expected creates unnecessary friction. And this would have a negative impact on conversions.

It’s very common for a few variations of an answer to a question to be possible; for example, when a form asks users to provide information about their state, and a user responds by typing their state’s abbreviation instead of the full name (for example, CA instead of California). The form should accept both formats, and it’s the developer job to convert the data into a consistent format.

Clear Error Message

When you write error messages, focus on minimizing the frustration users feel when they face a problem in interacting with a form. Here are a few rules on writing effective error messages:

Never blame the user.
The way you deliver an error message can have a tremendous impact on how users perceive it. An error message like, “You’ve entered a wrong number” puts all of the blame on the user; as a result, the user might get frustrated and abandon the app. Write copy that sounds neutral or positive. A neutral message sounds like, “That number is incorrect.”
Avoid vague or general error messages.
Messages like “Something went wrong. Please, try again later” don’t say much to users. Users will wonder what exactly went wrong. Always try to explain the root cause of a problem. Make sure users know how to fix errors.
Make error messages human-readable.
Error messages like “User input error: 0x100999” are cryptic and scary. Write like a human, not like a robot. Use human language, and explain what exactly the user or system did wrong, and what exactly the user should do to fix the problem.

Display Errors Inline

When it comes to displaying error messages, designers opt for one of two locations: at the top of the form or inline. The first option can make for a bad experience. Javier Bargas-Avila and Glenn Oberholzer conducted research on online form validation and discovered that displaying all error messages at the top of the form puts a high cognitive load on user memory. Users need to spend extra time matching error messages with the fields that require attention.

Avoid displaying errors at the top of the form. (Image: John Lewis) (Large preview)

It’s much better to position error messages inline. First, this placement corresponds with the user’s natural top-to-bottom reading flow. Secondly, the errors will appear in the context of the user’s input.

eBay uses inline validation.

eBay uses inline validation. (Large preview)

Use Dynamic Validation

The time at which you choose to display an error message is vital. Seeing an error message only after pressing the submit button might frustrate users. Don’t wait until users finish the form; provide feedback as data is being entered.

Use inline validation with real-time feedback. This validation instantly tells people whether the information they’ve typed is compatible with the form’s requirements. In 2009, Luke Wroblewski tested inline validation against post-submission validation and found the following results for the inline version:

22% increase in success rate,
22% decrease in errors made,
31% increase in satisfaction rating,
42% decrease in completion times,
47% decrease in the number of eye fixations.

But inline validation should be implemented carefully:

Avoid showing inline validation on focus.
In this case, as soon as the user taps a field, they see an error message. The error appears even when the field is completely empty. When an error message is shown on focus, it might look like the form is yelling at the user before they’ve even started filling it out.
Don’t validate after each character typed.
This approach not only increases the number of unnecessary validation attempts, but it also frustrates users (because users will likely see error messages before they have completed the field). Ideally, inline validation messages should appear around 500 to 1000 milliseconds after the user has stopped typing or after they’ve moved to the next field. This rule has a few exceptions: It’s helpful to validate inline as the user is typing when creating a password (to check whether the password meets complexity requirements), when creating a user name (to check whether a name is available) and when typing a message with a character limit.

Reward early, punish late is a solid validation  approach. (Image: Mihael Konjević)

Accessibility

Users of all abilities should be able to access and enjoy digital products. Designers should strive to incorporate accessibility needs as much as they can when building a product. Here are a few things you can do to make your forms more accessible.

Ensure The Form Has Proper Contrast

Your users will likely interact with your form outdoors. Ensure that it is easy to use both in sun glare and in low-light environments. Check the contrast ratio of fields and labels in your form. The W3C recommends the following contrast ratios for body text:

Small text should have a contrast ratio of at least 4.5:1 against its background.
Large text (at 14-point bold, 18-point regular and up) should have a contrast ratio of at least 3:1 against its background.

Measuring color contrast can seem overwhelming. Fortunately, some tools make the process simple. One of them is Web AIM Color Contrast Checker, which helps designers to measure contrast levels.

Do Not Rely On Color Alone To Communicate Status

Color blindness (or color vision deficiency) affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. While there are many types of color blindness, the most common two are protanomaly, or reduced sensitivity to red light, and deuteranomaly, or reduced sensitivity to green light. When displaying validation errors or success messages, don’t rely on color alone to communicate the status (i.e. by making input fields green or red). As the W3C guidelines state, color shouldn’t be used as the only visual means of conveying information, indicating an action, prompting a response or distinguishing a visual element. Designers should use color to highlight or complement what is already visible. Support colorblind people by providing additional visual cues that help them understand the user interface.

Use icons and supportive text to show which fields are invalid. This will help colorblind people fix the problems.

Use icons and supportive text to show which fields are invalid. This will help colorblind people fix the problems. (Large preview)

Allow Users To Control Font Size

Allow users to increase font size to improve readability. Mobile devices and browsers include features to enable users to adjust the font size system-wide. Also, make sure that your form has allotted enough space for large font sizes.

WhatsApp provides an option to change the font size in the app’s settings

WhatsApp provides an option to change the font size in the app’s settings. (Large preview)

Test Your Design Decisions

All points mentioned above can be considered as industry best practices. But just because something is called a “best practice” doesn’t mean it is always the optimal solution for your form. Apps and websites largely depend on the context in which they are used. Thus, it’s always essential to test your design decisions; make sure that the process of filling out a form is smooth, that the flow is not disrupted and that users can solve any problems they face along the way. Conduct usability testing sessions on a regular basis, collect all valuable data about user interactions, and learn from it.

Conclusion

Users can be hesitant to fill out forms. So, our goal as designers is to make the process of filling out a form as easy as possible. When designing a form, strive to create fast and frictionless interactions. Sometimes a minor change — such as properly writing an error message — can significantly increase the form’s usability.

his article is part of the UX design series sponsored by Adobe. Adobe XD tool is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behance, and also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.

Smashing Editorial
(al, yk, il)

Methods for Getting Straight Answers from Vague Clients

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/5zjAEKszuos/

It can be frustrating to work with a web design client who doesn’t provide direction or makes vague requests. This lack of communication can result in tons of revisions and difficulty.

Often, this is because they simply don’t know the design process. The client usually does know what they want, they just aren’t sure how to ask for it. So, before you do 50 revisions (and tear your hair out), try asking the right questions and drawing out their vision for the project.

The Basics

Before you even begin working, you should already have down the most essential ideas. Consider using a survey or questionnaire to establish these basics if you’re having trouble.

Do you have any branding or style guidelines? What do you definitely want to include and avoid? Do you have a color palette in mind? What’s the overall style? Who’s your target audience? What functions does this site need to include (shopping cart, contact forms, navigation bar, SSL certificate and other security features)?

If you can’t extract this from your clients, your project will stall.

A woman and man having a discussion.

What’s the purpose of this webpage/website? What are your goals? What kind of people do you want to visit this website?

Every website and webpage is designed around a central goal. Is it to read the blog? Share something? Click a link, buy a product? This is what your client wants emphasized. Ask them what they want people who visit this website to do.

Also important is the target visitor. It’s difficult to design a website when you don’t know your audience. Ask them to describe a “user persona” that represents the ideal visitor or customer.

Why do you want a new website? What is your old website not doing right?

When it’s time to do a redesign, this is the most important question. Maybe your client wants to stay trendy, update the color scheme, or implement stylish navigation. Whatever the case, you know what the goal is in this redesign.

A blurred sign that says "FOCUS".

Can you give me some examples?

Nothing teaches better than an example. Many clients will describe things ambiguously. For instance, asking for “sparkles” and not elaborating. Where? A few or a bunch? Should they be subtle or eye-grabbing?

If you get an indecisive reply, ask them to find examples of what they want. Or find them yourself and ask them to pick a favorite.

Which of these options do you like more?

It’s more work, but presenting a client with 2-3 options with small differences can be a great help. You can get an idea of what they want without them having to tell you directly. This also means less revisions and more chance for them to point out features they like or dislike.

Two doors of different colors.

What do you love most about this design? What do you dislike about it?

This is a great question because it takes a champion to give you an unhelpful answer. Clients are forced to point out something they enjoy or aren’t partial to. Even if the answer is short, it’s still extremely valuable feedback.

Why?

At the risk of sounding like a curious toddler, sometimes “why” is the best question you can ask. It needs to be phrased carefully in order to not come off as curt or accusatory, but the answer is exactly what you’re after.

Why do you want that section there? Why do you feel it isn’t colorful enough, what do you have in mind? Why that typography? Why do you dislike the other font?

Obviously, you shouldn’t question every decision your client makes, but it can help you understand their mindset and goals.

A question mark drawn on a chalkboard.

Making a Vague Client Open Up

A general tip: avoid vague questions, especially ones that can generate one-word answers. Instead, opt for open-ended questions that force clients to explain themselves, or specific questions about certain elements. Sometimes, you just have to keep asking questions until you get a satisfactory answer.

If you’re a web design client struggling with this, ask yourself these questions! Try to be specific about what you like and dislike. Look at other websites; point out what you like and why. If you give concrete feedback, the work will get done quicker, there will be less revisions, and everyone will be happier!