Let's Talk
I get asked this a lot: “You’re a designer; does this look okay?”
Most of the time it’s not even about a web application, but anything visually creative. Flyer designs, paint swatches, wall collages—my kids’ drawings. And most of the time my answer is the same: “looks good to me, kiddo, maybe you’ll be an artist one day!” However, when I do get the opportunity to weigh in on something a little closer to my bailiwick, I’m happy to take a more critical look at the project in question, and typically, have the same few guidelines to help these apps feel a little more polished:
1. Use Consistent Spacing & Typography
One of the first things I’ll notice about a raw application front end is the lack of consistent spacing and relative element sizes. Paragraphs that span the full width of the viewport, too-big and too-small headlines, and content jammed together (or drifting into the void) make an app feel under-designed.
- Don't Run Copy Across the Page
Set a max-width for your readable content to ensure each line of body copy is 60 to 70 characters long, usually between 800 and 1000px. - Relatively Scale Fonts Sizes
Set your base font size to at least 16px (or 1.6em, or whatever your unit is), and scale up from there by 20%-30% for each header, starting with H6 (h6 = base * 1.2, h5 = base * 1.4, h4 = base * 1.6, etc.). Your readers will appreciate the visual hierarchy, making the information easier to scan, and search engines will appreciate the organized, indexable content.
1 2 3 4 5 6 7 | $base: 1.6rem;
h1 { font-size: $base * 3; }
h2 { font-size: $base * 2.6; }
h3 { font-size: $base * 2; }
h4 { font-size: $base * 1.6; }
h5 { font-size: $base * 1.4; }
h6 { font-size: $base * 1.2; }
|
- Consistently Space Elements on a Grid
My rule of thumb is to use multiples of 8 when adding margins or padding. If my base spacing unit is 8px, that’s the smallest spacing. Paragraph gaps are base * 2. Column gaps are base * 3. Button corners are rounded by base * 1. It’s easy to do, and the app will feel more balanced. In fact, I’ll set a variable in the CSS for the base spacing unit, and use multipliers in the stylesheet instead of setting fixed values. Need to tighten up your spacing? Adjust the base variable to 6px. Feeling too jammed? Try 12px. Refresh. Voilà. - Limit Your Font Faces
Select a maximum of two fonts, though you can get away with three: one for headlines, and one for body text, buttons, form inputs, and everything else. (Sometimes, a third font is necessary for monospaced code blocks, secondary callouts, or extra-large, stylistic headlines). - Maintain Consistent Capitalization
I set form fields, headers, and buttons to title case, unless the brand specifically dictates ALL CAPS or l33t-sp34k lower-case.
2. Improve Button and Action Clarity
Just because the default label for submit buttons is “Submit” doesn’t mean we have to stand for it. Most of the time, “Submit” doesn’t accurately inform the user what’s going to happen. Use descriptive verbs that eliminate confusion about what the application is doing, i.e. “Send,” “Share,” “Save,” “Upload,” etc.
Apply the same logic to links within body copy. Accessible applications don’t like it when the linked text is a mere “click here” (and even worse, “click below”), so include active language within the anchor.
3. Establish Imagery Guidelines
Graphics & photography should directly support the content. If you don’t have your own relevant photography, source quality, high-resolution stock images that:
- help your visitor comprehend the content on the page, or
- support the brand or organizational aspirations.
Bad stock photography is evident, even if your users can’t specifically say why—real photos of your product or service in action will resonate instead of repel.
Try to avoid mixing art styles, or overdoing the graphic embellishments. One gradient is cool. Two can work. Ten is too many. If you’re using cartoon illustrations, don’t switch to 3d renders. Or animated mascots. Actually, don’t add animated mascots, ever.
Use icons sparingly, and from the same source. Mixed line weights, a mix of solid and outlined icons, or varying art styles will only give your application a cobbled-together, less-than-professional feel. Find an icon library that has a consistent look, and only use icons that follow established patterns (left/right arrows for “back/next,” pencil for “edit,” star/thumbs up/heart for “like,” dots/lines for “menu,” etc.). Not every action needs an icon. They can help, in conjunction with action verbs, to differentiate similar actions in an application, or to declutter the interface if there’s a lot to do. There are many free icon fonts available.
4. Handle Empty States
An “empty state” occurs when there is no data to display—usually because the user hasn’t taken any action yet, or because search/filter results came back empty. Is this the first time someone is using your product? They’ll probably see a lot of empty lists. Don’t do that. Instead, plan for empty states with helpful messaging that guides your users to “create a new ___” or “start your first ___.” Better yet, don’t show them the empty list at first—anticipate their first action (create a ___), and take them there.
If it’s something that will regularly deplete (unread messages, tasks to complete), be sure to give some helpful messaging that tells the user, “no, the page isn’t broken, you just don’t have anything to do here.”
5. Handle Loading States and Suggest Solutions
Blank screens are bad. So are buttons that look like they don’t work. If the user does something, and the application doesn’t react, it’s going to feel broken or slow, neither of which gives your user any confidence that it’s doing what it’s supposed to do.
Build in micro-messages that confirm the user’s actions as they happen, and add loading indicators if the action has to wait for a response. If, somehow, some way, something does go wrong, write user-friendly messages that put the blame on the machine instead of the human. Humans don’t like to be scolded by machines, even if the machines are right. Helpful error messages are clear (tells the user what went wrong), non-blaming (they don’t say “you did something wrong”), supportive (provides solutions with actions to take), and human (they feel conversational).
6. Run an Accessibility Checker
In order to ensure every visitor comes away with a positive experience, run your pages through an accessibility checker. These look for adherence to minimum tap target sizes, color contrasts, recommended use of semantic HTML tags, and proper element labeling. If an impaired visitor comes away from your application with a bad experience, chances are, so will everyone else. Try WAVE, WebAim's Contrast Checker, or Chrome's Lighthouse.
These are just a few suggestions to elevate the UX and UI of a basic Python application. Naturally, the more you understand your users and their behaviors, the more you can tailor the app’s touch points to better anticipate your users’ needs. Let Fusionbox turn your big ideas into stellar experiences.