Technical UX:

UX for Developers

What is UX?

What is refactoring?

Let's look at some code

function Process(processorType, accountType, expiration, address, name, cvv, amount, city, zip, state, number, country, routingNumber, bankAccountType) {
    var stripe = require("stripe")("sk_test_4eC39HqLyjWDarjtT1zdp7dc");

    if (processorType == 'stripe') {
        if (accountType == 'credit-card') {
            stripe.tokens.create({
                card: {
                    address_city: city,
                    number: number,
                    address_line1: address.split('
')[0],
                    address_line2: address.split('
')[1],
                    exp_month: expiration.split('/')[0],
                    exp_year: expiration.split('/')[1],
                    cvc: cvv,
                    address_state: state,
                    name: name,
                    address_country: country,
                    address_zip: zip
                }
                }, function(err, token) {
                    if (err) {
                        return;
                    }
            
                    (async () => {
                        const charge = await stripe.charges.create({
                          amount: amount,
                          currency: 'usd',
                          description: '',
                          source: token,
                        });
                      })();
                });
    } else if (accountType == 'bank') {
        stripe.tokens.create({
            bank_account: {
                country: country,
                currency: 'usd',
                account_holder_name: name,
                account_holder_type: bankAccountType,
                routing_number: routingNumber,
                account_number: number
              }
            }, function(err, token) {
                if (err) {
                    return;
                }
        
                (async () => {
                    const charge = await stripe.charges.create({
                      amount: amount,
                      currency: 'usd',
                      description: '',
                      source: token,
                    });
                  })();
            });
    
        } else if (accountType == 'invoice') {
            return createInvoice();
        }
    } else if (processorType == 'paypal') {
            if (accountType == 'credit-card') {
                ...
            } else if (accountType == 'bank') {
                ...
        } 
            else if (accountType == 'invoice') {
                return createInvoice();
            }
    }
}

And the UI to go with it

General Principles

  • Jakob's Law
  • Aesthetic Usability Effect

Organization & Relationships

  • Miller's Law
  • Law of Common Region
  • Law of Proximity
  • Law of Similarity
const address = {
    street: '123 Meadow Lane',
    city: 'Lafayette',
    zip: '70506',
    state: 'LA',
    country: 'US'
}

const card = {
    number: '4111 1111 1111 1111',
    name: 'Hunter Miller',
    expiration: '02/22',
    cvv: '222'
}

const bankAccount = {
    number: '000123456789',
    routing: '110000000',
    type: 'individual',
    country: 'US'
}

function Process(processorType, accountType, card, address, bankAccount, amount) {
    var stripe = require("stripe")("sk_test_4eC39HqLyjWDarjtT1zdp7dc");

    if (processorType == 'stripe') {
        if (accountType == 'credit-card') {
            stripe.tokens.create({
                card: {
                    address_city: address.city,
                    number: card.number,
                    address_line1: address.street.split('
')[0],
                    address_line2: address.street.split('
')[1],
                    exp_month: card.expiration.split('/')[0],
                    exp_year: card.expiration.split('/')[1],
                    cvc: card.cvv,
                    address_state: address.state,
                    name: card.name,
                    address_country: address.country,
                    address_zip: address.zip
                }
                }, function(err, token) {
                    if (err) {
                        return;
                    }
            
                    (async () => {
                        const charge = await stripe.charges.create({
                          amount: amount,
                          currency: 'usd',
                          description: '',
                          source: token,
                        });
                      })();
                });
    } else if (accountType == 'bank') {
        stripe.tokens.create({
            bank_account: {
                country: bankAccount.country,
                currency: 'usd',
                account_holder_name: bankAccount.name,
                account_holder_type: bankAccount.type,
                routing_number: bankAccount.routingNumber,
                account_number: bankAccount.number
              }
            }, function(err, token) {
                if (err) {
                    return;
                }
        
                (async () => {
                    const charge = await stripe.charges.create({
                      amount: amount,
                      currency: 'usd',
                      description: '',
                      source: token,
                    });
                  })();
            });
    
        } else if (accountType == 'invoice') {
            return createInvoice();
        }
    } else if (processorType == 'paypal') {
            if (accountType == 'credit-card') {
                ...
            } else if (accountType == 'bank') {
                ...
        } 
            else if (accountType == 'invoice') {
                return createInvoice();
            }
    }
}

Organization & Relationships pt. 2

  • Law of Uniform Connectedness
  • Von Restorff Effect
  • Serial Position Effect
const address = {
    street: '123 Meadow Lane',
    city: 'Lafayette',
    zip: '70506',
    state: 'LA',
    country: 'US'
}

const card = {
    number: '4111 1111 1111 1111',
    name: 'Hunter Miller',
    expiration: '02/22',
    cvv: '222'
}

const bankAccount = {
    number: '000123456789',
    routing: '110000000',
    type: 'individual',
    country: 'US'
}

function ProcessStripeCreditCardPayment(card, address, amount) { 
    var stripe = require("stripe")("sk_test_4eC39HqLyjWDarjtT1zdp7dc");
    stripe.tokens.create({
        card: {
            address_city: address.city,
            number: card.number,
            address_line1: address.street.split('
')[0],
            address_line2: address.street.split('
')[1],
            exp_month: card.expiration.split('/')[0],
            exp_year: card.expiration.split('/')[1],
            cvc: card.cvv,
            address_state: address.state,
            name: card.name,
            address_country: address.country,
            address_zip: address.zip
        }
        }, function(err, token) {
            if (err) {
                return;
            }
    
            (async () => {
                const charge = await stripe.charges.create({
                  amount: amount,
                  currency: 'usd',
                  description: '',
                  source: token,
                });
              })();
        });
}

function ProcessStripeBankPayment(bankAccount, amount) {
    var stripe = require("stripe")("sk_test_4eC39HqLyjWDarjtT1zdp7dc"); 
    stripe.tokens.create({
        bank_account: {
            country: bankAccount.country,
            currency: 'usd',
            account_holder_name: bankAccount.name,
            account_holder_type: bankAccount.type,
            routing_number: bankAccount.routingNumber,
            account_number: bankAccount.number
        }
        }, function(err, token) {
            if (err) {
                return;
            }
    
            (async () => {
                const charge = await stripe.charges.create({
                amount: amount,
                currency: 'usd',
                description: '',
                source: token,
                });
            })();
        });
}

function ProcessInvoice() {
    return createInvoice();
}

function ProcessPaypalCreditCardPayment(card, address, amount) { ..... }

function ProcessPaypalBankPayment(bankInfo, amount) { ..... }

Feedback & Flow

  • Doherty Threshold
  • Fitts' Law
  • Hick's Law
  • Zeigarnik Effect
const stripe = require("stripe")("sk_test_4eC39HqLyjWDarjtT1zdp7dc");

const address = {
    street: '123 Meadow Lane',
    city: 'Lafayette',
    zip: '70506',
    state: 'LA',
    country: 'US'
}

const card = {
    number: '4111 1111 1111 1111',
    name: 'Hunter Miller',
    expiration: '02/22',
    cvv: '222'
}

const bankAccount = {
    number: '000123456789',
    routing: '110000000',
    type: 'individual',
    country: 'US'
}

function createStripeToken(tokenInfo, callback) {
    stripe.tokens.create(tokenInfo, function(err, token) {
        if (err) {
            return;
        }

        callback(token);
    });
}

function stripeCharge(token, amount) {
    return stripe.charges.create({
        amount: amount,
        currency: 'usd',
        description: '',
        source: token,
      });
}

function ProcessStripeCreditCardPayment(card, address, amount) { 
    var tokenInfo = {
        card: {
            address_city: address.city,
            number: card.number,
            address_line1: address.street.split('
')[0],
            address_line2: address.street.split('
')[1],
            exp_month: card.expiration.split('/')[0],
            exp_year: card.expiration.split('/')[1],
            cvc: card.cvv,
            address_state: address.state,
            name: card.name,
            address_country: address.country,
            address_zip: address.zip
        }
    };

    createStripeToken(tokenInfo, (token) => stripeCharge(token, amount));
}

function ProcessStripeBankPayment(bankAccount, amount) {
    const tokenInfo = {
        bank_account: {
            country: bankAccount.country,
            currency: 'usd',
            account_holder_name: bankAccount.name,
            account_holder_type: bankAccount.type,
            routing_number: bankAccount.routingNumber,
            account_number: bankAccount.number
        }
    };
    
    createStripeToken(tokenInfo, (token) => stripeCharge(token, amount));
}

function ProcessInvoice() {
    return createInvoice();
}

function ProcessPaypalCreditCardPayment(card, address, amount) { ..... }

function ProcessPaypalBankPayment(bankInfo, amount) { ..... }

Control, Complexity & Value

  • Parkinson’s Law
  • Postel's Law
  • Occam's Razor
  • Pareto Principle
  • Tesler's Law/Law of Conservation of Complexity

Conclusion

Thanks!

Twitter: @hmillerdev

Email: hunter@technicallyux.com

Made with mdx-deck & https://lawsofux.com