What to Consider When Designing Your First Web App or Website

When designing your first web app it’s easy to get lost in all the requirements and not know where to start. When I was presented with creating a User Interface for a project that helped Mining Engineers determine drill hole samples I didn’t know how to organize the User Interface or even how to separate one set of content from the other. The thing that was racing through my mind was make it look pretty, but UI design is more than just how it looks. The User Interface is the way a user interacts with the system. It is the place where data is captured which will ultimately turn into useful statistics and meaningful information. It is important for the user to understand what information is required from them and help them to give that information as quickly and pain free as possible. Here are a few tips to consider when designing your first web app or website.

User-Centered

A user interface must be focused on the end user of the product. It involves users involvement all throughout the products development. Users should be available to give feedback throughout the design process and their feedback should be incorporated into the final product. In other words, if the user says the screen is too busy and more information gets added to the screen in the final product then its a fail.

Simple and Intuitive

It’s imperative to give the user a screen that is easily understandable. The user’s eye should not have to scan the screen up and down looking for the right button to click. The screen should be laid out such that the user’s eye would naturally look or be able to find based on the organization of the content. Each screen must be simple. It’s never a good idea to have too much animation or popups all over the place. Don’t let your design get in the way of functionality and simplicity.

Use the Correct Verbiage

There have been many times as a developer that I put developer language in the UI because I thought it is simple enough to understand. I was then told that the verbiage wasn’t clear enough. I thought to myself, “How?” Then I was helped to see that the way I code is not clear English. Instead of using the verbiage of “Selected Details” you could use “Selected Item Actions.” The latter lets the user know these buttons will perform the desired action on the selected item whereas the first implies these buttons are all lumped into a category of details. Word choice is instrumental in conveying instructions and screen navigation to the end user.

Progressive Disclosure

Ever heard of “Less is More?” Well, this is true for User Interfaces. It is possible to put too much information on the screen at once overwhelming the user with possibilities and options. I worked at a company whose requirement was to display everything on the screen. The only people who are able to use the application are seasoned employees who have been with the software from the beginning and seen all the changes. Any new employees are lost and easily overwhelmed. When creating a User Interface only disclose the buttons and information on the screen that is necessary to get the job done. Any additional features can be tucked away for the user until they need it. For example, A user want’s to search for couches on a website. They get 10+ pages when they realize they only care about blue ones. The user should be presented with filter categories when they specifically press the search/filter button. Then a screen with all filter categories can be presented to them. No need for it to take up screen real estate until absolutely needed.

Consistency

Consistency is critical when it comes to User Interface design. It is very confusing when one screen design is different than the next. Colors, form elements, font-family, size, and leading and other UI elements should all be the same across the application. Page layout should also be the same across the application. These are just some things that demonstrate the important’s of consistency. Consistency brings trust to the user that they will be able to understand and find what they are looking for because each screen will be familiar. Designers can achieve consistency in the application by developing a style guide. This will list out the icons, form elements, spacing, brand colors, enabled and disabled form states, etc. Also creating design systems can help developers stay on track with branding guidelines by providing components that can be easily added in code.

These are just a few things to consider when creating your first web app or web site. As the designer, it is on us to give the user the best experience possible. Providing value to the user will ultimately add value to the business as users will gain trust in the products they use daily. By giving the user a user-centered, easy and intuitive application, we can make a difference in the lives of people as they are able to complete their desired tasks with ease and simplicity.