UI Design – 10 Tips For Excellent UI Design (And Not Just for FileMaker!)

/2 Comments/in , , , /by

We can all agree on one thing: Apple knows design. The reason why Apple’s design is excellent is because it’s minimalistic and draws the users’ eyes to what needs to be seen and hides the rest.

A perfect example is the aluminum keyboard:

  • size: as small as physically possible for average fingers to type on;
  • key height: as shallow as possible for a good rebound effect;
  • the USB ports are hidden under the keyboard.

Follow the Universe. The stop sign is a universal symbol. Can you imagine if NYC decided to swap them out in hot pink and the shape of a triangle? You’d have cars piled up at every intersection. Of course, in a database we cannot cause traffic accidents, yet still it is important to pay attention to some design principles.

Quality itself is not enough. Some cultures have always paid attention to design and some took awhile to catch up. I remember how I hated the the style of the former Soviet Union while growing up in socialist Hungary. Every product that entered our country from them was large, boxy and durable, but hard on the eyes and hands. On the other hand, leave it to the Danish or the Swedes and you are guaranteed your product will be carefully designed.

“Even though design is not the most important thing, at the end of the day we are looking at this thing all day long,” said a possible client to me about their current design.

A good designer always looks at the interface from the user’s standpoint, not their own. It is always easier to slap on two more buttons, pick a color quickly and be done. But will those buttons fit in your theme? Do you have a theme at all? Web development has changed drastically over the last decade. Barely anyone uses Flash anymore, and people realized that you don’t need to have every color on the horizon on one screen. FileMaker shouldn’t be any different. A database, actually, gets a lot more screen time than any website, so it really should be paid attention to.

I just was faced with the UI below and even though I’m a designer/developer, I couldn’t figure out how to use this service. My initial thought was I must be stupid and/or getting old. Then it hit me that this experience is not my fault. A good interface is about not having to write a lengthy manual just to find the start button.

I’d like to give some pointers to new and old developers alike on some key details to pay attention to. Your users will thank you for it.

Design your theme

Don’t just start plunking elements on a layout. Or even if you had to do that last week (because your boss put a gun against your head and said you will have to put 23 more buttons there), take some time this week and visualize your user interface. Think about why the user needs to be there in the first place and what they need to see. Resource: https://kuler.adobe.com or https://filemakerthemes.com. Kuler even has an option to upload your image (client logo, brochure) and build your color theme from it.

Design for the appropriate screen size/resolution

Ask your client: what screen sizes/resolutions do you have? Are you on Mac or Windows or both? If you have a mixed screen environment, you have to design for the smallest screen, and extend everything from there. You can always extend white space, but if you start too large, they will have to scroll left and right or up and down to see their data.

Be minimalistic

Show interface controls on demand. If there is something you can hide, hide it. The user can always get to it later. If you overwhelm them, they will feel like a kid lost at Grand Central Station. There are plug-ins you can use for this. Resource: https://filemaker-plugins.com.

Minimize travel time

Isn’t it great that we have www.hopstop.com now with so many cities that we can choose routes with fewer transfers? Try to think of a way to get your users from point A to B in the least amount of time. Try to get as much information into one dialog as you can so they can choose what they need and move on.

Don’t abuse color

Choose 2-3 colors that complement each other. When in doubt, it’s always a good idea to use shades. You can never go wrong with black and white and shades of gray or another color.

Draw the users’ eyes to what they need

If you’ve seen heatmaps of web interfaces, you know that most people look from left to right and tend to ignore elements on the right. Try to put the most important elements on the left side. highlight the record they are viewing. Don’t reinvent the wheel, because you’ll just throw your users off and make them frustrated.

Use appropriate font sizes

Some things need to be in large font or bold (names, phone numbers, invoice totals). Make an executive decision and highlight the most important details.

Use appropriate font faces

Helvetica is an excellent font. If you want to go crazy, you can always mix 2-3 fonts, but no more. Verdana was meant for web design, and even for the web we don’t have to use it anymore. Note:  Some fonts render differently on Windows.

Display help and informational messages

Tooltips are built into FileMaker. Use them to give your users more info to minimize travel time. You can be creative with tooltips. You can use a tooltip on a contact to show:

  • more contact info;
  • whether they owe your client any money;
  • the information on their latest orders, etc.

Replace FileMaker notification messages with your own

A nicely worded error message in proper English is that says “Unfortunately, there were no records found. Would you like to do a new search?” is much more welcome than a plain old “No records match this find criteria.” It’s even more important to provide proper feedback in more complex situations so your user always knows why something didn’t happen. Another example: if you export reports to the desktop, name them with what the report is about and give the user a note at the end that the report was indeed created and this is what it’s called. Finding a document called “untitled” is very taxing for busy executives.

Conclusion

When combined with a clear focus on how the user is expected to interact with your product, the above tips and tricks work hand-in-hand to deliver something that’s not only good-looking, but usable. We can look to Apple as a leader in setting the standard for great design, but they’re not the only company that has design and usability as guiding principles for much of what they build. The excerpt below is from Smashing Magazine, and is what I’ll conclude with:

Similarly, the minimalist interface of the Google search engine manages to fully accomplish its objectives without getting in your way. The interface disappears, letting you focus on getting things done.

Steve Jobs once said, “design is not just what it looks like and feels like. Design is how it works.” In fact, the usability and overall usefulness of an app is governed by how well it performs its functions and how easily those functions are accessed. Design with a goal in mind — a goal that the interface helps your users achieve. Not every technique will work in every situation or for every application. Only implement interface elements if they make sense in your particular context. / Smashing Magazine