At SingleStone, our product designers are experts in areas sometimes considered their own specialty: user experience design (UX design), user interface design (UI design), user experience research (UX research), content strategy, and verbal design. I've created a list of about 50 tactics and principles our team uses to design apps that our clients and their customers love to use.
Design and Aesthetics
How an app looks sets the mood for the entire experience. Follow these guidelines to create simple, modern apps whose interfaces won't look dated next year.
- Get rid of everything that isn't useful. Eliminate elements such as text labels if there is already enough context.
- Negative space is a good thing. Having a healthy amount of negative space is often what separates elegant screen experiences from crammed, jumbled ones.
- Have a clear hierarchy for the layout elements. Don't have everything be the same size with equal visual weight.
- Stick to a single accent color to indicate interactivity.
- Be restrained with the use of color so that when colored alerts appear (red, yellow, green), they aren’t drowned out by the colors that are already visible.
- Be consistent unless there is a user-based reason to stray from an established pattern.
- The simplest way to visually separate elements is by having extra space between them. A line or background shape isn't always necessary.
- If space isn't enough, add a thin, 1-pixel line (horizontal or vertical) in a neutral color to act as a visual separator.
Usability
How an app works is just as important as its cosmetics. Follow the suggestions below to ensure your app is simple and intuitive. Every app has a job to do. Let's make that job as easy as possible.
- Make it visually obvious what is clickable: buttons, text inputs, select boxes, text areas, tabs, navigation items.
- Make the most frequently used information and buttons closest to the top and to the left of the layout for easy access.
- Make global navigation take up as little space as possible.
- The flatter the information architecture can be, the better. Users don't want to spend time clicking through layers of navigation.
- For tabs, always have one of the tab options selected by default.
- The best loading screen is a skeleton loading screen, but an animated graphic is better than nothing.
- No user wants to wait for a fancy animation to finish. Keep transitions brief and fast.
- Customized user greetings ("Good afternoon, Kevin!") are fun at first, but then they occupy precious space in the layout.
- Use red text or red background colors to alert the user to destructive actions such as deleting or removing something.
- Don't rely on just color (red, yellow, green) to indicate the health of data. Also have the shape, icon, or size of the element be different so that the information is clear for color-blind users.
- For key buttons and information, keep them always at the user's fingertips by having their position stay fixed even when scrolling. UI components can be cemented to the top, bottom, left, or right, but beware of using this technique too much because it reduces the amount of space on the page that changes when the user scrolls.
- To keep people from having to wait, avoid having all the data load at once, unless it will take less than one second. Use pagination strategies like only loading the first set of data results to let people get to work without delay.
Buttons
What would an interactive app be without at least one button? (Even weather apps have buttons nowadays.) These tips improve the usability of this deceptively intricate element.
- Make button hit states as large as possible, sometimes even larger than the shape of the button itself. For more about the science, read about Fitt's Law.
- Avoid icon-only buttons if there is room in the layout to include text. Most users are confused by icon-only buttons besides basics such as a triangle for playing a video, two vertical rectangles for pausing a video, a magnifying glass for search, an “x” to cancel, a “+” to add or create, and a trash can to delete.
- Choose an active verb for the beginning of text for buttons. But the verb should never be the vague "Click".
- Have a hover state for anything that is clickable if you're designing a non-touch interface.
- Consider how people may use the app with only a keyboard and no mouse. Define focus states in your designs, not just hover states.
- Try to avoid "junk drawer" buttons like hamburger menus and "..." icons that contain other buttons that can't fit in the layout.
Typography
The bedrock of every screen experience is text. Use these methods to refine the typographic approach to your design and ensure an elegant, pleasurable reading experience.
- Legible text with enough contrast is mandatory.
- Big text is a good thing. It's much easier to read.
- Stick to a single typeface family.
- To achieve typographic variety, change font size, color, weight, letter-spacing, word-spacing, or capitalization.
- Always define the line height for text if there is any chance that the text might wrap to multiple lines.
Data
With more digital sensors like phones and watches in our world, numbers and measurements have become an increasing part of the user experience for apps. Here are some recommendations to make sure the insights don't get buried in a sea of statistics.
- Round your numbers to the fewest digits as possible. For example, "98%" is probably enough precision vs. "98.829%".
- Display times and dates in a human readable format: "2 weeks ago", "in 5 minutes", or "12:34 PM, December 21, 2021".
- Numbers in a column should usually be right-aligned so that the digits line up vertically if the values have different numbers of digits.
- Include commas in numbers 1,000 or more to make their value more understandable at a glance.
- Avoid fancy charts and graphs. A big fat number is usually enough. If not, try a bar chart.
- Pie charts comparing 3 or more values are almost always more complicated than showing that information in a bar chart.
- Any data visualization that needs a separate legend to explain the color scheme should probably be redesigned.
Verbal Design and Writing
Make good choices related to the words and ideas presented in your app by following these guidelines. Simple decisions related to abbreviation, capitalization, and punctuation can reduce people's confusion and make an app more authoritative, refined, and human.
- Avoid abbreviations and spell out full words if there is enough space.
- Provide space in layouts for long names and first names or last names with multiple words.
- Spell out full names if there is enough room.
- Show a person's first name first, and have their last name be (you guessed it!) last.
- People have one-letter first names and last names, so avoid validation logic that requires at least 2 characters for either.
- When there is a complete sentence, include a period.
- Use curvy quotes for double quotes or single quotes. Don't settle for straight quotes, which are really intended to be inch marks or feet marks.
- Use en-dashes (–) in text for ranges instead of hyphens (-).
- When using em-dashes (—), have space on either side of the em-dash to have more attractive line breaks.
- Avoid text widows and orphans by using a non-breaking space between the last 2 words on a line.
- One way to avoid important proper nouns ("Boyz II Men") from wrapping to multiple lines is to replace the spaces in the noun with non-breaking spaces.
- Change pluralization of text to match the data displayed on the screen. For example, "0 results", "1 result", "4 results".
Although the design is just part of the equation when it comes to creating great software and applications, it’s a crucial aspect that can impact a product’s business performance, quality, and stability. SingleStone’s designers have the tools, expertise, and visual flair to create apps that deliver form without sacrificing function.
Shoot us a message if you agree with our design secrets or are looking to optimize your app’s user interface.
