Welcome Site Visitors!

Just a quick note since I haven't written a blog post here in a while. I decided to stop creating new posts for each conference; all of my slide decks should be available on SlideShare:

• Andrew Malek UX presentations on SlideShare

Also note that I have updated my conference speaking schedule; please be sure to check it out or subscribe to my Twitter feed for more information on where I'll be talking about UX next!

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! Developers - Why Care About the User Slides

Welcome, CodeStock Visitors!

Thanks for coming to my speech, Developers: Why Care About the User!

 

The updated slideshow 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.

Welcome UOfIWebCon Visitors!

Welcome #UofIWebCon visitors!

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

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/

Welcome JazzCon.Tech Visitors!

Welcome JazzCon.Tech visitors!

Click here for the updated slides to the talk "Tablets and Hybrids Need Mobile-Optimized Websites, Too!"

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

Welcome CodeStock visitors!

 

Welcome CodeStock visitors!

Click here for the references mentioned in the talk "When the Developer Must Design".

 

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:

10 Websites That Label Their Hamburgers (Menus)

It's a given - your mobile website or app needs the ability for visitors to navigate through all of its features.  Based on the latest design trends, you are highly likely to use the three line "hamburger" menu. Not only does this icon use little space, but since so many other mobile properties use this icon, everyone will instantly know that pressing it should bring up a menu, right?

Many user experience professionals recommend labeling the three lines with the word "MENU" or "SHOP" or "CATEGORIES" or something else to explicitly state what pressing the icon performs. Does labeling the icon matter?

Welcome to the Atlanta HTML5 User Group Members!

For those at the Atlanta HTML5 User Group meeting (4/5/2016), welcome! Here is a link to the Responsive Design and Development "Gotchas" slide deck, also referenced later in this blog:

 

https://speakerdeck.com/andrewmalek/responsive-design-and-development-gotchas

"When the Developer Must Design" Slides

Slides to my CodeStock and DevNexus 2016 talk - When the Developer Must Design - are now up at Speaker Deck!

• When the Developer Must Design slides

Websites Referenced: When the Developer Must Design

Websites referenced in my CodeStock and DevNexus 2016 talk - When the Developer Must Design - are listed below. 

CodeStock 2016 - July 16, 2016 - 10:20 am
DevNexus 2016 - February 17, 2016, 10:30 am

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

Invisible Design:

• Nobody Wants To Use Your Product
  https://www.smashingmagazine.com/2016/01/nobody-wants-use-your-product/
• Great Designs Should Be Experienced and Not Seen
  https://articles.uie.com/experiencedesign/
• 10 Reasons Why the Best Design Is Invisible
  http://designshack.net/articles/graphics/10-reasons-why-the-best-design-is-invisible/

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!