Designing a compatible user interface is no easy task. It requires a lot of study and understanding exactly what users are looking to do with your application. And the spectrum is huge when you include websites, blogs, and other digital products.

Featured image gift wrap boxes

But many of the best digital brands have given us references to solid user interface techniques. In this article I’d like to examine a couple of my favorite interface techniques and see how we can use these ideas when creating modern designs. Inspiration comes in many forms and designing a compatible UI/UX is often followed by a history of past failures. But remember that it only takes one successful interface to complete your product and offer something truly valuable.

Following the Majority

Even when you’re building newer app ideas you want to stay focused on the majority of your users. If you begin incorporating too many convoluted interface features it will scare off a good portion of your market. And this is never a good step when trying to build up recognition for your products.

A handy first step is to offer user feedback as a smooth method for handling interface changes. Users should have the ability to complain about what doesn’t work or what feels “off”. You obviously have the right to ignore these requests as much as you’d like. But if you’re noticing the same complaints tens or hundreds of times, it may be worth a second attempt. And similarly if you’re getting a lot of compliments on one element then you know that idea is solid.

Whenever you’re building digital products the end result is always comparable to your users’ feedback. Your personal opinion and the opinion of your team members is also important in the long run. But what you like shouldn’t outrank the voices of your userbase. Always keep them in mind when crafting new interface features.

Simple One-Click Solutions

Ask yourself what is the main purpose of my product? What can your website or application do that is valuable to users? Ultimately you’ll be focusing on a set of ideals which you look to accomplish in the quickest way imaginable.

As an example Audacity has many export features which you can access directly from the File menu. This is a quick way to import some audio and save the new edits as any common audio formats, such as MP3 or WAV. Granted this is a minute detail in comparison to other features but it’s a noticeable detail for seasoned veterans of the software.

Audacity editing audio application for Mac OS X

Dealing with a website layout is slightly different but still follows similar rules. You want to offer visitors a quick way to access all of your key webpages. Most commonly these are content pages which visitors may find helpful – or even about/contact details on your own website. Running analytics on your domain is a good method for tracking which pages are the most popular amongst all users.

By keeping tabs on web statistics you’ll be able to judge which pages are more important than others. With this knowledge you can adjust pieces of the interface as needed.

Separate Custom User Menus

One topic I love to bring up revolves around products with user interaction. When people are joining your application or website it’s important they can quickly access their own account details.

Instagram account settings page

Modern startups are mostly great about following these trends. I remember when Instagram was first getting popular there was basically no web interface to update account settings. Now in the footer there’s a link to login and access your account settings along with API keys/registrations. Even this simple addition has greatly improved their interface experience dealing with hundreds of millions of users.

It should be a very natural process for your users to land onto your homepage, log into their account, and quickly access their settings. Most core navigation schemes will include links for login/logout right in the header. But along with these links your users should have direct access to their profile page for easy adjustments.

Utilizing Hidden Menus

When you are working with limited screen space you have to get creative. Hidden navigation menus are just the tip of the iceberg when you think about assorted interface schemes. Some websites will only display the navigation items as you hover over links, or as you scroll down the page.

Official Google YouTube iPhone App - sliding navigation panel

There is also a common trend with mobile apps to hide the main navigation off to the side. Then users can tap a button or swipe the screen over to the side and reveal a long list of nav links. This method isn’t as complementary on websites because you often have a large enough monitor to work with, plus users aren’t tapping and swiping on the screen.

But the excitement of creating dynamic navigation systems is construed by planning for different situations. You should understand what most users are looking for and how they’ll be interacting with your product. These ideas can speak volumes about desktop web browsers such as Internet Explorer, Chrome, and Firefox.

Software developers create unique features for different purposes and these suit a particular audience. You want to find out which features best suit your audience and stick to them! Build a reputable name for your product by keeping the interface orderly and relatable. Make any interface changes gradually and always treat feedback as user case study results.

Conclusion + Mini-Showcase

I do hope these tips can bring out some brilliant interface techniques for web, mobile, and desktop products. You will run into various problems when building websites vs software applications. But the final result should be focused on a happy, healthy user interface.

I’ve collected just a small gallery of modern websites and mobile apps featuring impressive UX elements. These can be navigation systems, buttons, banners, icons, links, tags, or practically anything involving a user’s natural experience. Consider some of these design patterns and why their interfaces are so elegant by modern comparison.

YouTube for iPhone

Mobile iPhone iOS YouTube App

Things

New To-Do Task for iPhone Things App

Tweetbot Compose

Tweetbot for iPhone compose tweet screen

Lukomon App

Lukomon iPhone App interface design

Werdsmith

Werdsmith iPhone App ui design

Discourse

iPhone UITabBar dictionary iOS5 design interface

Barista App

Barista iPhone App UI design

Bosquet

Forrst Bosquet iPhone App wooden tab bar

RetailMeNot

iPhone App Retail me Not interface design

23snaps

iPhone App interface login form 23snaps network

On This Day…

iPhone calendar app interface on this day

Flickr App

Flickr iPhone App UI design

Darkness

Darkness iPhone app user interface design

Scrollider

WooThemes Scrolling Slider WordPress design

Olya

Wordpress theme design purple image slider

PixelPress

Wordpress WooThemes PixelPress website template theme

Merchant

Wordpress template theme WooThemes merchant ecommerce

Whitelight

WooThemes WordPress premium templates Whitelight design

Mystile

WooCommerce WordPress product theme dropdown menu nav

Wikeasi

Wordpress wiki theme search bar interface

Personalize

WPBundle WordPress web design blog theme

Roaming

Wordpress Roaming Theme WPBundle blog sidebar

Work & Play

WPBundle Work and Play WordPress premium theme footer

Reforum

Wordpress theme design forums WordPress interface elements

Posted by Jake Rocheleau

Jake is a writer & digital designer/illustrator. He writes about all things web and creative. Check out his website for work samples and follow his latest updates on Twitter @jakerocheleau.

Leave a reply

Your email address will not be published. Required fields are marked *