Decide: How will the interface look? (Part 4)

A variety of factors influence a user’s experience when they engage with an app. While much of it is outside of the developer’s control, there are many intentional decisions to make when building databases. Prioritizing a user-centered development process helps set an interface up for successful deployment and use—but how does one do that? In this four-part series, we will explore some of the decisions developers have to make as they evaluate their database user interface and experience.

How will the interface look?

Practically speaking, how should an interface look? The answer is situational and depends upon your users. After all, when you design for a client, you are looking out for their best interests as well as their users’ interests—making their preferences the top priority.

If your client has a marketing or design team, ask them for input. Bonus: Those teams will greatly appreciate giving input and being involved with the process. More than likely, your client has invested research, resources, and money into their brand (hopefully). Additionally, they may have a different look-and-feel for internal (personnel-facing) and external (client-facing) resources. All of this should be taken into consideration and implemented as much as possible throughout the interface design.

But what if your client does not have a style guide or brand campaign? What if you must decide on an aesthetic style without insight from your client? When these occasions arise, we recommend erring on the side of a classic style over a trendy or stylized design. Doing so will prevent your interface from quickly appearing to be dated. Remember: clean-and-simple will take you far.

When you are struggling to find inspiration, a great exercise is to identify an app or website or software suite you enjoy—and then figure out why. Explore various features and functionalities while taking copious notes. You can also ask your client for an example they enjoy using. It’s worth noting that we more frequently consciously identify our poor user experiences. Those can be learned from, but it's vital to intentionally recognize our positive user experiences.

How many designers and developers have had a client ask if they can make the logo bigger? It is a common request that is based in a desire to have brand features front-and-center. However, white space is necessary as it provides your work (and its context) room to breathe and exist on the layout. A lack of sufficient white space makes it difficult for the brain to process the information being conveyed. In art, the matte around a piece draws attention to and compliments the artwork it surrounds. Your white space should employ a similar technique. Additionally, websites and desktop software almost always need significantly more white space than mobile apps do.

A key component frequently overlooked is typeface design. For the best experience, use system-standard fonts or provide end-user access to non-standard ones. A brand's style guide may designate specific fonts to be used (particularly for headlines). If you have a situation where your clients want a font that's not available to the end users, a solution for headlines is to create a PNG with a transparent background (rather than a text field). An exciting feature of FileMaker 19 that we are exploring at PK Information is the potential to insert specific fonts via CSS, such as those available in Google Fonts.

Lastly, use color appropriately. Differentiation (such as alternating row colors on a list view) can be achieved with subtlety. However, accents and branding (such as layout titles, important information, and button colors) require pops of color. In design, the concept of gestalt can be briefly explained as 1 + 1 = 1. It means that when your design is refined with the elements working together (rather than keeping up with each other), the brain processes what it sees as a cohesive whole rather than a conglomeration.

Using these techniques, you can easily create an interface primed for a positive user experience. Contemplate your use of white space, typeface design, and color—particularly with the client’s brand in mind. These provide a structural hierarchy that successfully communicates information.

PART 1: WHO DO YOU DESIGN FOR?

PART 2: HOW WILL YOU DEVELOP?

PART 3: HOW DO YOU STRUCTURE CONTENT?


PK Information is a FileMaker-certified development agency serving the Tampa Bay, Miami Lakes, and Knoxville regions. We believe that great software can change everything. Would an interface refresh help users better navigate your application? Contact us today!

SUBSCRIBE

Sign up with your email address to receive future posts like this directly to your inbox.