Simple tips for better app design

Meghan KennedyUX Designer
Simple tips for better app design
Simple tips for better app design

So, you have been given a document or idea and asked to turn it into an online web application.  How do you translate a multi-page requirements document or diagram into a solution that is easy to understand, easy to follow, fill out, and looks good? Those of you with design experience are off to a solid start, but what if you don’t? Luckily there are a few simple tips for better app design that can elevate your application and deliver engaging web applications.

After adding all of your content you might end up with an app that looks like this.

 

Design example that is too busy and overloaded

This design is too busy, and can overwhelm users

 

While yes, it works as originally scoped, does it offer the best user experience? That is the difference between a working solution and a well-designed application experience. 

Here we provide a few simple, yet impactful tips to elevate the experience of your solutions for your users.

 

Tip 1: Break it down

 

It seems logical that to reduce the amount of ‘time’ spent on a digital solution you should try to fit as much as possible onto your pages. However, research into usability shows that an overcrowded page might take the user longer to complete.

Ideally, you should break up your content so that there is only a single question group, centered around one theme or topic, per page. This is ideal in terms of usability as it ensures the user can focus on just one ‘single task’ per page, such as filling in all fields related to their address. Don’t be afraid of breaking it up into multiple parts over a few pages e.g. Company Details – Part 1. This reduces the cognitive load (the amount of information that the human brain can hold or process at a time) for the user and makes the process seem less overwhelming.

It can be difficult to find that sweet spot, but research has shown that two “screenfuls” (the content that can fit on the screen before the user needs to scroll to see the next full page) of content is best. “74% of the viewing time was spent in the first two screenfuls, up to 2160px.”

Tip for better design: break down into sections

Break your content into sections

 

Tip 2: Front and Center

 

You might have considered maximizing space by using a horizontal layout. You can get more questions and text in that way, right? But what is happening is that you have a layout that the human eye will find harder to follow, as research shows that “web users spend 80% of their time viewing the left half of the page and 20% viewing the right half” (Fessenden, 2017).   

You might also be tempted to save vertical space by running your text across the entire page width, but this only adds to your user’s cognitive load. “The optimal line length for body text is 50–75 characters. Shorter or longer line lengths can hurt readability” (Baymard Institute, 2024). So your end user should be presented with content that is a limited, but optimal width. Positioning your content in the middle of the page will also help with the balance and allow your users to view your solution comfortably in the middle of the page.  

Rethinking content width doesn’t only apply to text. When laying out your questions on your form it’s good practice to set the question text above the input field and not beside it, where possible. “We recommend placing field labels above the corresponding text fields. Although this increases the form’s overall length, it makes the form easier to scan, because users can see the text field in the same fixation as the label. Top placement also allows for longer field labels, as horizontal space isn’t an issue” (Marieke McCloskey, 2023). 

 

Tip for better design: content centred and white space either side

Restricted width in the center decreases the cognitive load

 

 

Tip 3: Negative space

 

You are not alone in thinking that by condensing the text, you are saving space and reducing the appearance of the amount of content. However, looking at an overloaded page can make the author feel like it is more work to read than it is.  

“A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to read” (Jakob Nielsen, 2011). Don’t be afraid to break up blocks of text into chunks where the reader can take a break and process what they have just read.  

It is also important to have adequate space between the lines (‘line spacing’) as this aids in the readability of the text and will help ease the cognitive load of your user. “Users can be hesitant to fill out forms online, so you want to make this process as easy as possible. Minor changes — such as using white space effectively to group related fields and indicating what information goes in each field — can significantly increase form usability” (Marieke McCloskey, 2023). A quick rule for line spacing is that it should be 1.4 times the font size. E.g. your font is set at 10pt so the line spacing would be 14pt.  Many factors come into play when finding the correct line spacing but the 1.4 rule is a good place to start.

Like most things in life, there needs to be balance, adding in too much space and making your user scroll endlessly causes usability problems. Users can easily feel overwhelmed when the form they are filling in has no end in sight, so remember that two ‘screenfuls’ are optimum. 

 

Tip for better design: add white space

White space improves the readability

 

Tip 4: Use images and graphics with purpose 

 

The use of imagery to engage your audience is a solid strategy, but the overuse of large images can be problematic. The main focus should be the content of the digital solution and the use of images and other graphic elements should be to support the content, not overpower it. Having a ‘busy’ image as a background or header for a digital solution can distract the user from the main purpose of the solution. This competition for the user’s attention and focus can cause the user to miss important content and slow them in completing their task.   

This doesn’t mean never using images in your digital solutions. Images and illustrations can help inform and engage your audience and the right image as a background can be a grounding and supportive element to the content. Make sure that you use images and graphics that support the user in understanding the message and completing their task. 

 

Design tip: add images to support the content

Imagery in the corners supporting the content

 

Summing up 

 

Designing engaging web applications involves a lot of pieces. There are so many things to think about even before you start thinking about the design. If you have a prebuilt solution that doesn’t look quite right or you are in the process of building right now, remember these tips to get started. Firstly, break down the content into parts, with two screenfuls optimal for readability. Secondly, reduce the width of your content and move it to the middle of the page. Thirdly, providing your text and content with enough negative space will help users easily move through your solution. And lastly, use large images and graphics to support the content instead of pulling the focus away.

Hopefully, these simple tips for better app design help you get started in the big wide world that is user experience design. If it’s all feeling a little too daunting, the UX team at Neota is always happy to assist. Simply reach out to your customer success manager.

 

Before and after the tips have been applied

More Blog Articles
Client-Centric Innovation in Law

How Harneys Elevates Value with Digital Service Delivery   As debates around the billable hour and outside counsel spend stay ever-present on legal conference agendas, the essential question for law firms remains the same: how do you add value for clients and enhance their experience working with you?  The purpose law firms serve – in…

The Use of Decision Models to Overcome Growth Challenges

A case study with Upskill ABA   The Big Boom of Behavior Analysts In the years leading up to 2000, families affected by autism often faced financial burdens due to limited insurance coverage for autism care. However, around that time, there was a notable shift. Thanks to the implementation of new laws and regulations in…