Daily UI: 004 Calculator

Here I wanted to try a mad libs style input for the variables affecting an auto loan, such as a new or used vehicle, location, price of the vehicle, down payment, and trade-in value, to help add context to what those variables are versus just using a series of input fields like a form. The calculations come out as the total amount and the monthly payment. Most shoppers are very monthly payment conscious versus what the total amount is.

Another Color Exploration

I really love the colors on this one, especially the light purple background. Super similar in the mockup style to the sign up mock I did with the pinks, blues, and purples.

I also learned that if you select an element in Figma, and you want to change the opacity, a very quick shortcut is to just press one of the number keys. For example, select an element then press 1 will change the opacity of the element to 10%. Press 2 for 20% and so on. Learning shortcuts to improve workflow speed is one of my favorite things.

Phone Mockup

This was my attempt at a popular phone mockup style with requires the use of a lot of different shadows to create depth and feel of a physical phone while still maintaining an illustrated aesthetic. Also my attempt at a flat style illustration as illustration is something I’ve been meaning to get more in to.

Simple Intro Page

Here I wanted to play with colors so I chose some of my favorites: pinks, purples, and blues. I also wanted to experiment with “realistic shadows” - duplicating the screen, adding blur and opacity with a slight offset from the original. Trying this method versus a single color dropdown like what might be used for a button. The white border mimics the bezel of the phone to frame the screen.

Accessibility and Inclusive Design

Notes from Aquent Summer Camp’s Accessibility & Inclusive Design: a Designer’s Field Guide by Rob Huddleston, Design Director at Capital One.

This was a webinar about accessibility and inclusive design as a best practice - giving an overview of definitions and basic principles.

Every design decision has the opportunity to exclude customers.

Accessibility is the ability of any experience to be easily navigated and understood by a wide, diverse audience to complete their tasks and achieve their goals. Inclusive design is usable by as many people as reasonably possible without special adaptation or design. This means the design solves for 80-90% of users while taking the approach to solve for the needs of the few and extend to the masses.

This definition reminded me of a different documentary I watched about designing pruning shears for gardening. The solution for the shears included thicker handles to make it easier for those with arthritis or weaker grip strength to use the shears more easily, with the thought being, if these work for people with arthritis, it works for the larger population as well.

An example of a special design is m. sites that were duplicate sites specifically for mobile.

Disability does not necessarily mean just personal health conditions. Disability means mismatched human interactions that are contextual. For example, it can be permanent like someone with one arm, temporary such as a broken arm, or situational like a new parent using one arm to hold a child.

Illustration of scale of disabilities from Microsoft’s Inclusive Design toolkit

An interesting question: how would speech impediments or heavy accents affect Amazon Alexa or Google Home?

Takeaways

There are a great number of articles online that detail best practices for accessibility and inclusive design. I’m just going to highlight ones I thought were interesting from the webinar.

Vision impairment

This is typically the first thing we think of when talking about accessibility. Vision impairment can include blindness, color blindness, aging, and eyesight that is less than 20/20. In terms of color contrast for red-green colorblindness, adding a bit of blue to the green helps users differentiate between the two. WCAG AA is the best default standard for color contrast.

Comparing contrasts of the body text. We all love our shades of grey but make it accessible. Using the Stark Figma Plugin Contrast Checker.

Images and icons

Pair icons with content. Image alt text should not be redundant and it should be useful. Example, “girl drinking coffee while working on her laptop” versus “decorative background image”. Semantic html says all images need alt text but is the alt text actually useful if the image is decorative?

Text

People scan headings and stop when something captures their interest. Reading order should equal visual order with short, relative content to support scanning.

Use copy with relevant context. Example, “Click here to begin survey” versus “Click here” and more descriptive copy for buttons aside from just “OK” or “Cancel”.

Copy on buttons that describes what will happen if the user clicks the button.