Welcome, DevNexus 2018 Visitors! Form UI Slides Are Online

Welcome, DevNexus 2018 visitors!

Thanks for coming to my speech, "Why Nobody Fills Out My Forms Part 2: Electric Boogalo"!

Still having difficulty encouraging people to fill out web forms to sign up for newsletters, apply for jobs, or complete their online shopping orders? Find out even more tips to help keep people from abandoning early, such as making form field widths more convenient, easing credit card entry, grouping related fields into sections to promote scanning, and styling buttons and controls so your webpage does not look like it was written in 2000.

The slides can be found here.

Welcome, All Things Open 2017 Visitors! Form UI Slides Are Online

Welcome, All Things Open 2017 Visitors!

Thanks for coming to my speech, "Why Nobody Fills Out My Forms"!

Has your web form conversion rate hit a wall? Are users not receiving confirmation e-mails, getting pestered with password or data format warnings *after* they finish entering their information, or bailing after being asked the same questions multiple ways? Find out why not enough people are filling out your web forms, and learn suggestions of A/B tests you can try to help encourage more people to interact.

The updated slides can be found here.

Welcome, DevSpace 2017 Visitors! UI Presentation Slides Are Online

Welcome, DevSpace 2017 Visitors!

Thanks for coming to my two speeches!

Developers: Why Care About the User?

As developers, we deal with technologies, frameworks, and data, making it very easy to forget that what we create is meant for real people to use. 

While designers and UI specialists should handle most decisions about how a product or service looks and feels, we should all be on the same page to make better solutions. Whether we are building an interface for a desktop website, mobile application, or chatbot, what are some basic design concepts that we as developers can pick up, allowing us to be on the same page with designers and product owners during product meetings and discussions?

The updated slides can be found here.

Why Nobody Fills Out My Forms

Has your web form conversion rate hit a wall? Are users not receiving confirmation e-mails, getting pestered with password or data format warnings *after* they finish entering their information, or bailing after being asked the same questions multiple ways? Find out why not enough people are filling out your web forms, and learn suggestions of A/B tests you can try to help encourage more people to interact.

The updated slides can be found here.

Welcome, CONNECT.TECH Visitors! Icons Behaving Badly Slides

Welcome, CONNECT.TECH 2017 visitors!

Thanks for coming to my speech, Icons Behaving Badly!

The design behind adding interactivity to an application or website seems trivial; download a free icon collection from sites such as Flaticon, Font Awesome, or iconmonstr, pick an appropriate icon, and add the image to your work. However, should there be more to this process, especially if you are concerned about people understanding how to use what you develop? Learn why the "5-second rule" doesn't apply just to picking food off the floor, how the wrong icon can show cultural insensitivity, why the manner icons are placed in a website or app may be as important as the images themselves, and how to perform icon usability tests. You may be surprised which icons users find to be generally instantly recognizable as to what functions they relate, and which others not so much.

The slideshow is now online, and can be found here.

Welcome, CodeStock Visitors! Tablet-Optimized Website Speech Online

Welcome, CodeStock Visitors!

Thanks for coming to my speech, Tablets and Hybrids Need Mobile-Optimized Websites, Too! 

The updated slideshow can be found here.

"Why Nobody Fills Out My Forms" Slides and Resources

Welcome JazzCon.Tech visitors!

Click here for the updated slides to the talk "Why Nobody Fills Out My Forms"

Resources:

AlephBet is a pure-javascript A/B (multivariate) testing framework for developers.
https://github.com/Alephbet/alephbet

PlanOut is a library and interpreter for designing online experiments.
https://github.com/facebook/planout

Sixpack: An Ab Testing Framework from SeatGeek
http://sixpack.seatgeek.com/

Google Analytics Content Experiments
https://developers.google.com/analytics/solutions/

Kissmetrics - Customer Intelligence and Web Analytics
https://www.kissmetrics.com/

Optimizely - Experimentation Platform
https://www.optimizely.com/

Unbounce -  build custom landing pages for any campaign
http://unbounce.com/

Visual Website Optimizer - A/B and Split Testing Software
https://vwo.com/

Watch Out For False Positives - 3 Ways To Get Better At Testing
http://marketingland.com/watch-false-positives-3-ways-get-better-testing-105386

The Ultimate Guide To A/B Testing
https://www.smashingmagazine.com/2010/06/the-ultimate-guide-to-a-b-testing/

12 A/B Split Testing Mistakes I See Businesses Make All The Time
http://conversionxl.com/12-ab-split-testing-mistakes-i-see-businesses-make-all-the-time/

How Netflix does A/B Testing
https://uxdesign.cc/how-netflix-does-a-b-testing-87df9f9bf57c

Define Stronger A/B Test Variations Through UX Research
https://www.nngroup.com/articles/ab-testing-and-ux-research/

28 Tips for Creating Great Qualitative Surveys
https://www.nngroup.com/articles/qualitative-surveys/

Why Users Fill Out Less If You Mark Required Fields
http://uxmovement.com/forms/why-users-fill-out-less-if-you-mark-required-fields/

Reset and Cancel Buttons
https://www.nngroup.com/articles/reset-and-cancel-buttons/

The 25 Best Words to Use in Your Call-To-Action Buttons
http://blog.wishpond.com/post/103290853633/

Showing/Hiding vs.Enable/Disabling form fields
http://ux.stackexchange.com/questions/31082/showing-hiding-vs-enable-disabling-form-fields

IP2Location - Geolocate IP Address Location
http://ip2location.com

GeoIP Products - MaxMind
http://dev.maxmind.com/geoip

W3C - Geolocation API Specification
http://dev.w3.org/geo/api/spec-source.html

Google Maps API - Reverse Geocoding
https://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse

GeoNames geographical database
http://www.geonames.org/

Form Usability: Avoid Splitting Single Input Entities
http://baymard.com/blog/mobile-form-usability-single-input-fields

How can I deal with diverse gender identities in user profiles?
http://ux.stackexchange.com/questions/25826/

How To Optimize Contact Forms For Conversions
http://unbounce.com/conversion-rate-optimization/how-to-optimize-contact-forms/

Mailcheck - Reduce misspelled email addresses in your web apps
https://github.com/mailcheck/mailcheck

Validate email address in JavaScript?
http://stackoverflow.com/questions/46155/

Legit - checks the domain of an email address for valid/existence of MX records
https://www.npmjs.com/package/legit

For Returning Users, Overly Strict Password Requirements Can Lead to an 18% Abandonment Rate
http://baymard.com/blog/password-requirements-and-password-reset

A dynamic strength meter for password input validation with various configurable options
https://github.com/kartik-v/strength-meter

jQuery Password Strength Meter for Twitter Bootstrap
https://github.com/ablanco/jquery.pwstrength.bootstrap

Low-Budget Password Strength Estimation
https://github.com/dropbox/zxcvbn

Usability Testing of Inline Form Validation: 40% Don't Have It, 20% Get It Wrong
http://baymard.com/blog/inline-form-validation

Form validation - When should error messages be triggered?
http://ux.stackexchange.com/questions/74531/

On forms, is inline placeholder text better than a label outside each field?
http://ux.stackexchange.com/questions/9220/

Mobile Form Usability: Never Use Inline Labels
http://baymard.com/blog/mobile-forms-avoid-inline-labels

The New Rules of Form Design
http://www.uxbooth.com/articles/the-new-rules-of-form-design/

Placeholders in Form Fields Are Harmful
https://www.nngroup.com/articles/form-design-placeholders/

Why Infield Top Aligned Form Labels Are Quickest to Scan
http://uxmovement.com/forms/why-infield-top-aligned-form-labels-are-quickest-to-scan/

How the float label pattern started
http://mds.is/float-label-pattern/

Float Labels with CSS
https://css-tricks.com/float-labels-css/

Label Pattern with just CSS
http://codepen.io/chriscoyier/pen/CiflJ

Float Labels - a Collection
https://codepen.io/collection/IjFib/

Float label pattern for Vue.js
https://github.com/bkzl/vue-float-label

Placeholders with the same text as the label - good practice?
http://ux.stackexchange.com/questions/83380/

LinkedIn Lost 167 Million Account Credentials in Data Breach
http://fortune.com/2016/05/18/linkedin-data-breach-email-password/

360 million Myspace accounts breached
http://www.usatoday.com/story/tech/2016/05/31/360-million-myspace-accounts-breached/85183200/

Yahoo hack: 1bn accounts compromised by biggest data breach in history
https://www.theguardian.com/technology/2016/dec/14/yahoo-hack-security-of-one-billion-accounts-breached

Which Site Seals Create The Most Trust?
http://conversionxl.com/research-study/trust-seals/

How Users Perceive Security During the Checkout Flow
http://baymard.com/blog/perceived-security-of-payment-form

Why Most Online Shoppers Don’t Make it Past the First Step of Checkout
https://blog.kissmetrics.com/first-step-of-checkout/

How to Create a UI That Users Can Trust
https://designshack.net/articles/ux-design/create-a-ui-that-users-can-trust/

6 Essential Trust Signals For Your Website To Follow
https://www.koozai.com/blog/search-marketing/6-essential-trust-signals-for-your-website-to-follow/

Why Nobody Fills Out My Forms - Slides

Welcome Connect.Tech 2016 participants!

The slideshow for my talk "Why Nobody Fills Out My Forms" is online at SlideShare. Enjoy!

Has your web form conversion rate hit a wall? Are users not receiving confirmation e-mails, getting pestered with password or data format warnings *after* they finish entering their information, or bailing after being asked the same questions multiple ways? Find out why not enough people are filling out your web forms, and learn suggestions of A/B tests you can try to help encourage more people to interact.

* "Why Nobody Fills Out My Forms" slideshow

Tablets and Hybrids Need Mobile-Optimized Websites, Too! Slides

Slides to my Connect.TECH 2016 and Scenic City Summit talk - Tablets and Hybrids Need Mobile-Optimized Websites, Too! - are now available at SlideShare!

It takes extra work to deliver a truly responsive website. Since larger tablets and hybrids such as iPad Pros and Windows Surface devices can fit the full size of a standard laptop/desktop website, a tempting thought is to save time and deliver to them the exact same experience. This talk may change your mind, elaborating on why that kind of thinking can hamper the user experience and possibly drive people away, perhaps to access your website on a laptop or smartphone, or worse yet to a competitor.

• Tablets and Hybrids Need Mobile-Optimized Websites, Too! Slides

What Content Must Your Restaurant Website Display?

"Amanda steps out with her officemates for lunch, and no one has a strong opinion where to eat. She picks up her phone and searches for Mediterranean restaurants, and lucky you! Yours appears near the top of the list.

While the well-placed photos of dolmas and falafel look enticing, what isn’t alluring is the long wait as she downloads a full menu. After waiting ten seconds for the list of appetizers to appear, it’s on to the next restaurant from the list."

If you own a restaurant and this happens to you, congratulations! You just lost several customers, perhaps permanently. With so many restaurant choices available in many areas, and with information available at the press of a screen or button, your website needs to offer what people want – and quickly.

So… what exactly does a restaurant website need? Based on informal surveys and offering this question as a part of my "Responsive Design and Development Gotchas" talk, here are some suggestions in no particular order:

Too Many Fonts...

An example of why too many fonts can be confusing - a re-imagined* Spotify on iOS.

 

Don't think this is so bad? Check out this quote and article from Nigel French at Adobe Create Magazine:

"A good principle to live by, whether you’re new to typography or a seasoned pro, is to keep it simple. Or to put it another way, don’t use too many fonts. Just as mixing too many colors on your palette will likely result in mud, mixing too many fonts on a page will probably result in a confused message."

* - for demonstration purposes only - not the original app's choice of fonts!

Responsive Design and Development "Gotchas" Slides

Slides to my Connect.JS 2015 talk - Responsive Design and Development "Gotchas" - are now up at Speaker Deck!

• Responsive Design and Development "Gotchas" slides

Websites Referenced: Responsive Design and Development "Gotchas"

Connect.JS 2015
October 17, 2015, 10am

 

Andrew Malek

https://twitter.com/@malekontheweb
http://www.malektips.com/

 

Android Device Fragmentation - OpenSignal

http://opensignal.com/reports/2015/08/android-fragmentation/

 

Content strategy

• http://www.usability.gov/what-and-why/content-strategy.html 
• http://alistapart.com/article/audiences-outcomes-and-determining-user-needs 
• https://uxmag.com/articles/content-strategy-and-ux-a-modern-love-story

 

“Hamburger icon: How these three lines mystify most people” - BBC

http://www.bbc.com/news/magazine-31602745

 

Hamburger menu studies

• http://exisweb.net/menu-eats-hamburger
• http://conversionxl.com/testing-hamburger-icon-revenue/
• http://www.peakusability.com.au/articles/mobile-ux-part-1-menu-burgers-and-navicons
• http://www.adammcfarland.com/2013/10/24/responsive-mobile-ui-split-test-icons-or-text/

 

“Should “gender” be required, or is there a better way to collect this information?” – StackOverflow

http://ux.stackexchange.com/questions/19923/

OpenID and social network signon

• Google Sign-In: https://developers.google.com/identity/
• Facebook Login: https://developers.facebook.com/docs/facebook-login
• Yahoo – via OpenID: https://developer.yahoo.com/openid/
• OpenID: http://openid.net/

 

Bootstrap: Show Password

https://github.com/wenzhixin/bootstrap-show-password

 

jQuery Password Strength Meter for Twitter Bootstrap

https://github.com/ablanco/jquery.pwstrength.bootstrap

 

Jared Spool on surveys and 10-point scales

https://twitter.com/jmspool/status/584001051415683072

 

Notes on creating surveys

• https://www.uie.com/brainsparks/2015/09/24/stop-doing-survey-research/
• https://www.uie.com/brainsparks/2010/12/26/19-lessons-from-united-airlines-on-how-to-build-a-crappy-survey/
• http://www.nngroup.com/articles/keep-online-surveys-short/

GDS Design Notes – Asking for a date of birth

https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/

 

Notes on rendering birthday UI

• http://ux.stackexchange.com/questions/5119/
• http://ux.stackexchange.com/questions/41059/

 

IP Location and Geolocation

• http://ip2location.com
• http://www.netimpact.com/
• http://dev.maxmind.com/geoip/
• https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation
• https://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse

 

Identify card type from card number – StackOverflow

http://stackoverflow.com/questions/5911236/identify-card-type-from-card-number

 

MailCheck: Reduce user-misspelled email addresses in your forms

https://github.com/mailcheck/mailcheck

 

Gestural Interfaces: A Step Backwards In Usability

http://www.jnd.org/dn.mss/gestural_interfaces_a_step_backwards_in_usability_6.html

 

App User Retention Improves in the U.S., but Declines Internationally – Localytics

http://info.localytics.com/blog/app-user-retention-improves-in-the-us

 

Projections of the Size and Composition of the U.S. Population: 2014 to 2060

https://www.census.gov/content/dam/Census/library/publications/2015/demo/p25-1143.pdf

 

A Study of Novice Older Adults and Gestural Interaction on Smartphones

http://mobile-accessibility.di.fc.ul.pt/papers/mobacc2013_submission_6.pdf

 

Users’ Perspective of Smartphone Platforms Usability: An Empirical Study

http://ijssst.info/Vol-15/No-3/data/3857a379.pdf

PointClear - Optimizing mHealth Apps for Older Adults: 8 Strategies

http://blog.pointclearsolutions.com/2014/06/optimizing-mhealth-apps-older-adults-8-strategies/

Affordances and Design – NNG

http://www.jnd.org/dn.mss/affordances_and.html

 

Mobile Onboarding: A Beginner’s Guide: Smashing Magazine

http://www.smashingmagazine.com/2014/08/mobile-onboarding-beginners-guide/

UX Study: Teaching a user how to use your app: Richard Kim on Medium

https://medium.com/@cwRichardKim/ux-study-teaching-a-user-how-to-use-your-app-1c77e0e1271c

 

Affording Horizontal Swipes on Touchscreens

http://uxpatterns.org/affordances/affording-horizontal-swipes-on-touchscreens/